angular-cli: 1.3.0 causes build to fail with - Cannot read property 'range' of null

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting

Versions.

ng --version: 1.3.0 npm --version: 5.3.0 node --version: 8.1.4

Repro steps.

I have lazy loaded routes and feature modules ng build --aot --prod

The log given by the failure.

ERROR in chunk 7
[id].[chunkhash:20].chunk.js
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:118:14)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:97:24)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:106:24)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:110:25)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:97:24)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:106:24)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:97:24)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:106:24)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:110:25)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)
    at getPathInAst (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:110:25)
    at enterNode (C:\Users\fabriece\Documents\GitHub\hapi\orange\node_modules\webpack\lib\optimize\ConcatenatedModule.js:121:18)

Desired functionality.

Aot build without errors

Mention any other details that might be useful.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 14
  • Comments: 40 (3 by maintainers)

Most upvoted comments

I’m still getting this on @angular/cli 1.6.6.

@akhedrane Here is an open issue regarding this: https://github.com/angular/angular/issues/21809 They are working on a solution.

same here

@angular/cli: 1.3.0 node: 7.5.0 os: win32 x64 @angular/animations: 4.3.2 @angular/common: 4.3.2 @angular/compiler: 4.3.2 @angular/compiler-cli: 4.3.2 @angular/core: 4.3.2 @angular/forms: 4.3.2 @angular/http: 4.3.2 @angular/platform-browser: 4.3.2 @angular/platform-browser-dynamic: 4.3.2 @angular/platform-server: 4.3.2 @angular/router: 4.3.2 @angular/cli: 1.3.0

For me was related to the syntax of FormBuilder:

This shortcut sintax NOT works

this.frmMain = this._fb.group({
  name: [, Validators.required]
})

This works

this.frmMain = this._fb.group({
  name: [null, Validators.required]
})

Problem solved to me

I am experiencing this issue in multiple projects using the latest CLI version (1.6.6).

As a workaround, I am avoiding the issue by disabling the build optimizer:

ng build --build-optimizer false

Enabling vendor-chunk solve the issue temporarly

ng build --prod --aot --vendor-chunk=true

Tested with: Angular CLI: 1.6.7 Angular: 5.2.3 Node: 9.3.0

I’m having this issue as well.

TypeError: Cannot read property 'range' of null

I tested with: Angular 5.2.2 and 5.2.1 Angular CLI 1.6.6

Downgrading all packaged from 5.2.2 to 5.2.1 works for me.

Same issue with cli 1.6.6 …

ng build --prod

ERROR in chunk main [initial]
[name].[chunkhash:20].bundle.js
Cannot read property 'range' of null
 at enterNode (C:\Users\aksjer\Desktop\front\node_modules\webpack\lib\optimize\ConcatenatedModule.js:146:17)

But works with

ng build --prod --aot=true --build-optimizer false

I had the same error but the problem was an unnecessary comma in validators array: 'city': [null, [Validators.required, , Validators.pattern(/[a-zA-Z\'\- ]/)]] changed it to 'city': [null, [Validators.required, Validators.pattern(/[a-zA-Z\'\- ]/)]] and everything compiles with ng build --prod --build-optimizer

As a note, if you switch to module: 'commonjs' instead of module: 'es2015' in your tsconfig.app.json, it will also fix this as a temporary workaround until https://github.com/angular/angular/pull/20624 (which simply changes locale modules to commonjs) is in.

👍 ng build -prod --aot=false

Date: 2018-01-26T08:50:42.558Z                                                          
Hash: 6489d7e4ce1f1f08b377
Time: 33050ms
chunk {scripts} scripts.fd1b8544486b343d90d6.bundle.js (scripts) 539 kB [initial] [rendered]
chunk {0} polyfills.f20484b2fa4642e0dca8.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.5152e16c74af191dad78.bundle.js (main) 345 kB [initial] [rendered]
chunk {2} styles.7b9f938cde1e9541b6d2.bundle.css (styles) 448 kB [initial] [rendered]
chunk {3} vendor.571cdc5ee4a4893e9dcd.bundle.js (vendor) 1.27 MB [initial] [rendered]
chunk {4} inline.e544213acdf44988a8f0.bundle.js (inline) 1.45 kB [entry] [rendered]

👎 ng build -prod

Date: 2018-01-26T08:51:18.480Z • Hash: 8e2201377496e9821044 • Time: 28052ms             
1 unchanged chunks
chunk {scripts} scripts.fd1b8544486b343d90d6.bundle.js (scripts) 539 kB [initial] [rendered]
chunk {0} polyfills.f20484b2fa4642e0dca8.bundle.js (polyfills) 59.1 kB [initial] [rendered]
chunk {2} styles.7b9f938cde1e9541b6d2.bundle.css (styles) 448 kB [initial] [rendered]
chunk {3} inline.e92868292339cf6d2e4f.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in chunk main [initial]
[name].[chunkhash:20].bundle.js
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null

tested with ngCli v1.6.6/v1.6.5 and angular v5.2.1

me too. if I downgraded Angular from 5.2.2 to 5.2.1 and it works. Other apps I’m working on do build with angular 5.2.2 and cli 1.6.6…

Facing same issue with 1.3.1 as well

This seems to be partly some sort of caching issue. I have it working on my development server. On the build server, I’ve reinstalled the global version of the @angular/cli to be 1.2.8 (same as on development), reinstalled all project node packages, and released. npm cache clear has been used. I have made sure both environments are using the same version of npm.

However, I get this error on the build server, but not on the development server.

I have seen the issue come up on development and both are now reverted to be using 1.2.8 of the cli, globally and within the project. This fixed the issue on development, but not on the build server,