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

[sfabriece]

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.

[hevans90]

I am also experiencing this issue, as compared to a build --prod in 1.2.7

[gabucito]

I have the same problem. I tried npm install webpack --save-dev and got another error.

An error occured during the build:
Error: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:210:21)
    at Compilation.processModuleDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:199:8)
    at _this.buildModule.err (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:340:13)
    at building.forEach.cb (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:144:27)
    at Array.forEach (native)
    at callback (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:144:13)
    at module.build (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:171:11)
    at resolveDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:160:4)
    at ContextModule.result.resolveDependencies (/home/gabu/Projects/tester/node_modules/@ngtools/webpack/src/plugin.js:261:25)
    at ContextModule.build (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:105:8)
    at Compilation.buildModule (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:146:10)
    at factoryCallback (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:329:11)
    at /home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:13
    at /home/gabu/Projects/tester/node_modules/tapable/lib/Tapable.js:268:11
    at done.then (/home/gabu/Projects/tester/node_modules/@ngtools/webpack/src/plugin.js:263:28)
No module factory available for dependency type: ContextElementDependency
Error: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:210:21)
    at Compilation.processModuleDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:199:8)
    at _this.buildModule.err (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:340:13)
    at building.forEach.cb (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:144:27)
    at Array.forEach (native)
    at callback (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:144:13)
    at module.build (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:171:11)
    at resolveDependencies (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:160:4)
    at ContextModule.result.resolveDependencies (/home/gabu/Projects/tester/node_modules/@ngtools/webpack/src/plugin.js:261:25)
    at ContextModule.build (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:105:8)
    at Compilation.buildModule (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:146:10)
    at factoryCallback (/home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:329:11)
    at /home/gabu/Projects/tester/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:96:13
    at /home/gabu/Projects/tester/node_modules/tapable/lib/Tapable.js:268:11
    at done.then (/home/gabu/Projects/tester/node_modules/@ngtools/webpack/src/plugin.js:263:28)

But looking around this seems to be caused by a webpack version mismatch.

[samrantmedia]

I am getting this issue when trying to upgrade from version 1.2.0 to 1.3.0.

I have tried deleting the node modules, clearing the node cache and trying again.

The updated version of webpack is 3.4.1

[pjm16]

Hi, it's failing for us with the same errors.

We're working around it by switching off aot compilation - "ng build --prod --aot false". Hoping a CLI fix could resolve though as it's not something we'd want to do long-term

[vsharma2266]

It is weird that some people are getting this error and some are not.
We are getting this issue and our work around involved downgrading:

"@ngtools/webpack": "1.1.1"
"@angular/cli": "1.2.7"

Hopefully we have a some one from the CLI team looking into it soon.

[hevans90]

We are also working around this issue by locking the CLI version: "@angular/cli": "1.2.7"

Hopefully some light is shed on this at some point, as the error messages coming from webpack are impossible to decipher

[samrantmedia]

I am not using aot compilation (I use ng build --prod --aot false) and I get this error. I managed to get it working on my development machine, but I have not been able to get it working on the build machine, despite it having the same settings, doing 'npm cache clean' and deleting all node modules first.

I tried changing to the webpack version explicitly stated as above (1.1.1) and this wanted @angular/core@^2.0.0, but I am on version 4.2.5

[samrantmedia]

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,

[tzachov]

Looks like it's related to UglifyJS. I ran ng build --build-optimizer --aot true --output-hashing all --sourcemaps false --extract-css true and it compiled successfully.

Then I ran ng build --target production --build-optimizer --aot true --output-hashing all --sourcemaps false --extract-css true and got the same error.

I don't have a service worker configure and I have no use of NODE_ENV so according to https://github.com/angular/angular-cli/wiki/build#bundling--tree-shaking UglifyJS is the only difference between the two builds.

I also got the error without using --build-optimizer.

[kambbado]

localhost-1502908329170.txt
Yesterday I upgraded to version 1.3.0, after that I starting getting Error: No provider for AuthenticationService!, today I reverted to version 1.2.8 and the error is now gone. I have included the output from Chrome in case it may help you. If I compile it gives a similar error but with a different provider. Please let me know if there is something I can test from my side that may help you debug this issue. Thank you

Manny

[dkbhadeshiya]

Facing same issue with 1.3.1 as well

[gabucito]

I have also tried 1.4.0-beta.1 and 1.4.0-beta.2 and the problem is still there.

[Juansasa]

same here

[rodolfojnn]

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

[JoeMellon]

@rodolfojnn Thanks! Same issue.

[filipesilva]

Hi all, I'd like to look into this but am having trouble reproducing it. Can someone give me steps I can follow in a new project to see the error?

[kambbado]

@filipesilva, my project has customer modules from another application, I use npm to install and than use them in the application. I will try to create a sample application to see if I can replicate. It may take me a few days to create it, someone may have a smaller application which they can shared it sooner.

[filipesilva]

This might be related to https://github.com/angular/angular-cli/issues/7408, users there also seem to be having some trouble related to the upgrade in Webpack internal plugins.

[kambbado]

@filipesilva I just tested my application using @angular/[email protected] and I not longer get the error. I tried testing it using just ng serve and ng serve -prod --aot with no issues. I also tested using ng serve -prod --aot --build-optimizer, which saved a few bytes from the chunks. Whatever place existed with 1.3.0 is now fixed in 1.3.2.

Thank you

[sfabriece]

@filipesilva after testing, @rodolfojnn suggestion worked for me. In the code that uses FormBuilder I had to change
fb. email: [, Validators.compose([Validators.required, Validators.email]) });
with
fb. email: [undefined, Validators.compose([Validators.required, Validators.email]) });

Notice undefined or null in @rodolfojnn case.

But only in the main bundle, other feature modules still have the former form. I wonder why this is the case.

[martinstark]

Same issue here on 1.3.0, .1, and .2. @rodolfojnn's suggestion worked as a solution.

[vsharma2266]

Like everyone else is saying @rodolfojnn's solution worked for me as well.

[tzachov]

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

[techogate]

@tzachov Many thanks, exactly the same solution for me.

[kimamula]

Why is this issue closed?
Isn't this a bug of angular-cli?

[sfabriece]

@kimamula the solutions provided here were sufficient for me. That's why I closed the issue. 😂

[dantheman999301]

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

[jfmaeck]

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

[b-mi]

Same problem, helped return to older package versions. It look we have to stay on older packages. :-(

[aksjer]

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

[rekna1]

Same here...
ERROR in chunk main [initial]
[name].[chunkhash:20].bundle.js
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
at enterNode (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:146:15)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:125:24)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:134:24)
at enterNode (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:149:18)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:138:25)
at enterNode (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:149:18)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:125:24)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:134:24)
at enterNode (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:149:18)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:125:24)
at getPathInAst (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:134:24)
at info.moduleScope.variables.forEach.variable (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:536:23)
at Array.forEach ()
at modulesWithInfo.forEach.info (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:524:34)
at Array.forEach ()
at ConcatenatedModule.source (C:Projectstestnode_moduleswebpackliboptimizeConcatenatedModule.js:516:19)

Compiles with -> ng build -prod --aot=false
but at runtime error
inline.78473abd5c48b764ac05.bundle.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
at o (inline.78473abd5c48b764ac05.bundle.js:1)
at Object.cDNt (main.30cba308dd9fc462669e.bundle.js:1)
at o (inline.78473abd5c48b764ac05.bundle.js:1)
at Object.0 (main.30cba308dd9fc462669e.bundle.js:1)
at o (inline.78473abd5c48b764ac05.bundle.js:1)
at window.webpackJsonp (inline.78473abd5c48b764ac05.bundle.js:1)
at main.30cba308dd9fc462669e.bundle.js:1
o @ inline.78473abd5c48b764ac05.bundle.js:1
cDNt @ main.30cba308dd9fc462669e.bundle.js:1
o @ inline.78473abd5c48b764ac05.bundle.js:1
0 @ main.30cba308dd9fc462669e.bundle.js:1
o @ inline.78473abd5c48b764ac05.bundle.js:1
window.webpackJsonp @ inline.78473abd5c48b764ac05.bundle.js:1
(anonymous) @ main.30cba308dd9fc462669e.bundle.js:1

Failing also in non production build at runtime:
bootstrap aac2077a138753afc283:54 Uncaught TypeError: Cannot read property 'call' of undefined
at __ webpack_require__ (bootstrap aac2077a138753afc283:54)
at Object.../../../../../src/main.ts (main.ts:1)
at __ webpack_require__ (bootstrap aac2077a138753afc283:54)
at Object.0 (main.bundle.js:2991)
at __ webpack_require__ (bootstrap aac2077a138753afc283:54)
at webpackJsonpCallback (bootstrap aac2077a138753afc283:25)
at main.bundle.js:1

at:
function __ webpack_require__(moduleId) {

on line:
modules[moduleId].call(module.exports, module, module.exports, __ webpack_require__);

where moduleId:
../../../core/esm5/core.js

[Marcelh1983]

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..

[filipefreitas82]

Having the same issue.
Using:
Angular CLI: 1.6.6
Node: 8.9.0
OS: darwin x64
Angular: 5.2.2

[ManhattanDoctor]

Downgrading all packaged from 5.2.2 to 5.2.1 works for me.

[WuglyakBolgoink]

👍 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

[marcuslind90]

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

[akhedrane]

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

[marcuslind90]

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

[mko]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}