Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.3.0 causes build to fail with - Cannot read property 'range' of null #7339

Closed
sfabriece opened this issue Aug 10, 2017 · 40 comments
Closed
Assignees
Labels
needs: repro steps We cannot reproduce the issue with the information given

Comments

@sfabriece
Copy link

sfabriece commented Aug 10, 2017

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.

@sfabriece sfabriece changed the title Build optimizer causes build to fail with - Cannot read property 'range' of null 1.3.0 causes build to fail with - Cannot read property 'range' of null Aug 10, 2017
@hevans90
Copy link

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

@gabucito
Copy link

gabucito commented Aug 11, 2017

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
Copy link

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

@pauljmartin16
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

tzachov commented Aug 16, 2017

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
Copy link

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
Copy link

Facing same issue with 1.3.1 as well

@gabucito
Copy link

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

@Juansasa
Copy link

same here

@rodolfojnn
Copy link

rodolfojnn commented Aug 22, 2017

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
Copy link

@rodolfojnn Thanks! Same issue.

@filipesilva
Copy link
Contributor

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?

@filipesilva filipesilva self-assigned this Aug 24, 2017
@filipesilva filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Aug 24, 2017
@kambbado
Copy link

@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
Copy link
Contributor

This might be related to #7408, users there also seem to be having some trouble related to the upgrade in Webpack internal plugins.

@kambbado
Copy link

@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
Copy link
Author

sfabriece commented Aug 24, 2017

@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
Copy link

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

@vsharma2266
Copy link

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

@tzachov
Copy link

tzachov commented Sep 5, 2017

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
Copy link

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

@kimamula
Copy link

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

@sfabriece
Copy link
Author

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

@deadwards90
Copy link
Contributor

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

@jfmaeck
Copy link

jfmaeck commented Jan 26, 2018

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
Copy link

b-mi commented Jan 26, 2018

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

@aksjer
Copy link

aksjer commented Jan 26, 2018

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
Copy link

rekna1 commented Jan 26, 2018

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:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:146:15)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:125:24)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:134:24)
at enterNode (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:149:18)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:138:25)
at enterNode (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:149:18)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:125:24)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:134:24)
at enterNode (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:149:18)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:125:24)
at getPathInAst (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:134:24)
at info.moduleScope.variables.forEach.variable (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:536:23)
at Array.forEach ()
at modulesWithInfo.forEach.info (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.js:524:34)
at Array.forEach ()
at ConcatenatedModule.source (C:\Projects\test\node_modules\webpack\lib\optimize\ConcatenatedModule.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
Copy link

Marcelh1983 commented Jan 26, 2018

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
Copy link

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

@ManhattanDoctor
Copy link

Downgrading all packaged from 5.2.2 to 5.2.1 works for me.

@WuglyakBolgoink
Copy link

👍 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
Copy link

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
Copy link

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
Copy link

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

@mko
Copy link

mko commented Feb 6, 2018

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 angular/angular#20624 (which simply changes locale modules to commonjs) is in.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests