Angular-cli: Module build failed: TypeError: Cannot read property 'newLine' of undefined

Created on 29 Dec 2016  Â·  77Comments  Â·  Source: angular/angular-cli

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\Hozefa\Ang\FirstApp\TestApp'
@ multi main

Anyone?

OS?

Windows 7

Versions.

angular-cli: 1.0.0-beta.24
node: 4.4.6
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

The log given by the failure.

ERROR in multi main
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localho
st:4200/' in 'D:\Hozefa\Ang\FirstApp\TestApp'
@ multi main

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\t
ypescript\libtypescript.js:8062:20)
at Object.createCompilerHost (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\ty
pescript\libtypescript.js:44978:26)
at Object.ngcLoader (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\@ngtools\we
bpacksrc\loader.js:171:31)
@ multi main

faq
Source
picture hozefam
👍51

Most helpful comment

rm -rf node_modules/ in your project to get rid of all npm stuff and then npm cache clean followed by npm install should also resolve this issue. Also, make sure the versions of the cli locally and globally match. In my case this issue appeared as of an old version of angular-cli which still got installed extraneous through my shrinkwrap while I was using the new @angular/cli packages.

picture hnrchrdl on 10 Feb 2017
👍32 🎉3 😄2 👎2 😕1

All 77 comments

Can you provide repro steps please?

filipesilva picture filipesilva on 30 Dec 2016

I've solved it on my side by adding the required AotPlugin item to my plugins

import {AotPlugin} from '@ngtools/webpack'

exports = { /* ... */
  plugins: [
    new AotPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule'
    })
  ]
}

check out the usage for more information on the options
https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

bstaley picture bstaley on 2 Jan 2017
👎2 👍2

Where webpack configuration is placed inside bootstrapped project?

donvadicastro picture donvadicastro on 4 Jan 2017
👍1

I've located the root source of that error at https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/loader.ts#L186

The instanceof check fails. Therefore, the else is executed, and because the loader has no options (it should not enter the else because we have the plugin), and the undefined loader options propagates to TypeScript, and boom, but that's not the important part.

The instanceof fails because the export of plugin.ts is executed two times in the compiled JavaScript vendor source, leading to similar AotPlugin ctors, but not strictly equal.

If I remove the instanceof check, everything works as expected.

It may happen in some specific setups. In my case, build logic and the application aren't in the same npm modules.
In my build module, I use:

{
    test: /\.ts$/,
    loader: require.resolve('@ngtools/webpack')
}

In the application module, Webpack does a require() of the path given by require.resolve(). Since it's not the same module, node executes the export again, giving a new, non equal, AotPlugin ctor.

There are some ways to fix the issue on my side, like deporting @ngtools/webpack in the application module. On the library side, removing the instanceof check in favor of a more duck-typed approach is also a possibility.

toverux picture toverux on 12 Jan 2017
👍4 ❤2 🎉2

Hello!
I faced same error! So anyone can guide me how to fix it? I have read above comments but I don't know how and where to change. Thank you!

phamlehoaian picture phamlehoaian on 13 Jan 2017
😕1

@phamlehoaian In most cases, this is simply because you forgot to add the AotPlugin.

toverux picture toverux on 13 Jan 2017
👎3 😄1 👍1

@toverux Can you please tell me how to add AotPlugin? I did not forget! I have no experience about this! Please help me! Thank you.

phamlehoaian picture phamlehoaian on 13 Jan 2017
👍10

This doesn't seem to be a problem with the AoTPlugin because that would mean you're trying to use it separately.

As far as I can tell, @hozefam and @phamlehoaian were having problems with angular-cli usage itself.

My bet is that this is dependency problem. Are you absolutely sure you followed https://github.com/angular/angular-cli#updating-angular-cli when upgrading?

I'm testing a new project right now and don't get this. But I know this can happen with outdated dependencies, and that happens if you don't follow the upgrade guide.

filipesilva picture filipesilva on 13 Jan 2017
👍12 🎉2 👎2

@filipesilva I faced this problem in fresh new installed nodejs and angular-cli. So I think that it is not related with upgrading. BTW, in project folder, I noticed that the file webpack.config.js is not existed. Is it right?

phamlehoaian picture phamlehoaian on 13 Jan 2017

@phamlehoaian yes that is right, you shouldn't have webpack.config.js in your project.

Can you tell me exactly what you did so I can reproduce the error? The exact commands please, and if you changed any files in the project.

filipesilva picture filipesilva on 13 Jan 2017

@filipesilva Okay, I will remove all nodejs as this guide http://stackoverflow.com/questions/38602808/uninstall-node-js-windows-10, then I will install new, keep all commands and send to you. Please wait.

phamlehoaian picture phamlehoaian on 13 Jan 2017

@phamlehoaian no need to do all that, these steps are enough: https://github.com/angular/angular-cli#updating-angular-cli

filipesilva picture filipesilva on 13 Jan 2017
👍3 👎2

@filipesilva It's so strange! After I uninstall all things and start new install to this command npm install -g angular-cli, then the new created project is working perfect!

phamlehoaian picture phamlehoaian on 13 Jan 2017
👎1 👍1

@phamlehoaian sometimes these things happen and there are dependency problems. I'm glad it's working correctly for you now :D

filipesilva picture filipesilva on 13 Jan 2017
👎1

Had to update my npm and angular cli. After that is done. Delete your project folder, clone it back again. Run npm install. And things should work.

deepakkadarivel picture deepakkadarivel on 30 Jan 2017
👎2 👍1

@deepakkadarivel new clone idea worked for now

bkottapally picture bkottapally on 9 Feb 2017

rm -rf node_modules/ in your project to get rid of all npm stuff and then npm cache clean followed by npm install should also resolve this issue. Also, make sure the versions of the cli locally and globally match. In my case this issue appeared as of an old version of angular-cli which still got installed extraneous through my shrinkwrap while I was using the new @angular/cli packages.

hnrchrdl picture hnrchrdl on 10 Feb 2017
👍32 🎉3 😄2 👎2 😕1

Thanks @hnrchrdl, that worked for me.

elfleat picture elfleat on 11 Feb 2017

thanks @hnrchrdl

mmathys picture mmathys on 13 Feb 2017

go through this, this might help.

https://github.com/angular/angular-cli#updating-angular-cli

ndkcha picture ndkcha on 14 Feb 2017
👎1

shorthand of @hnrchrdl's solution, all in one:

rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli; npm uninstall -g angular-cli; npm i --save @angular/cli && npm i -g @angular/cli && npm i
mmathys picture mmathys on 15 Feb 2017
👍20 🎉3 👎1

@mmathys your command got truncated in github. This is what I received in email notification:

rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli && npm uninstall -g angular-cli && npm i --save @angular/cli && npm i -g @angular/cli && npm i && npm start

hnrchrdl picture hnrchrdl on 15 Feb 2017
👍2 🎉1

@mmathys I needed 'sudo' for the -g installs/uninstallls, otherwise, just what I needed :)

tomjon picture tomjon on 16 Feb 2017
👍3

In my case, this error was because I updated to beta.32 and I didn't noticed that the node_modules folder was not completely removed.
After removing the folder manually, I got it working.

manuelreina picture manuelreina on 18 Feb 2017

it need delete node_module
,uninstall -g angular-cli and and angular/cli
and install @angular/cli

pumpkindev picture pumpkindev on 24 Feb 2017

why do we need the cli locally and globally?

quantuminformation picture quantuminformation on 24 Feb 2017
👍4

Because for example when you're building the project, you want to use ng build (not ./node_modules/@angular/cli/bin/ng build).

mmathys picture mmathys on 25 Feb 2017
👍2

I am getting the same error, but on circle/ci. Everything works fine locally on my mac. Naturally, since circle/ci builds everything from scratch, the advice to rm node_modules does really apply :( I checked the dependencies, and everything is exact other than ngrx additions. I even created a new angular-cli project and just copied everything over just in case :(

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:9426:20)
    at Object.createCompilerHost (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:62475:26)
    at Object.ngcLoader (/home/ubuntu/angular2-ngrx-example/node_modules/@ngtools/webpack/src/loader.js:329:31)
 @ multi ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:9426:20)
    at Object.createCompilerHost (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:62475:26)
    at Object.ngcLoader (/home/ubuntu/angular2-ngrx-example/node_modules/@ngtools/webpack/src/loader.js:329:31)
 @ multi ./src/polyfills.ts

ERROR in ./src/test.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:9426:20)
    at Object.createCompilerHost (/home/ubuntu/angular2-ngrx-example/node_modules/typescript/lib/typescript.js:62475:26)
    at Object.ngcLoader (/home/ubuntu/angular2-ngrx-example/node_modules/@ngtools/webpack/src/loader.js:329:31)
28 02 2017 12:47:04.259:ERROR [karma]: { Error: no such file or directory
    at MemoryFileSystem.readFileSync (/home/ubuntu/angular2-ngrx-example/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/home/ubuntu/angular2-ngrx-example/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
    at doRead (/home/ubuntu/angular2-ngrx-example/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:205:29)
    at Plugin.readFile (/home/ubuntu/angular2-ngrx-example/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:210:7)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/src/polyfills.ts' }
28 02 2017 12:47:04.269:ERROR [karma]: { Error: no such file or directory
    at MemoryFileSystem.readFileSync (/home/ubuntu/angular2-ngrx-example/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/home/ubuntu/angular2-ngrx-example/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
    at doRead (/home/ubuntu/angular2-ngrx-example/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:205:29)
    at Plugin.readFile (/home/ubuntu/angular2-ngrx-example/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:210:7)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/src/test.ts' }
npm ERR! Test failed.  See above for more details.
egervari picture egervari on 28 Feb 2017
👍12

you might want to check angular-cli.json and package.json for outdated local angular-cli versions.

phil294 picture phil294 on 3 Mar 2017
👎1

I'm seeing exactly the same error as @egervari reported. I'm writing my code on a Windows 8.1, build, test, e2e and lint works perfectly. Once I push my code to CI (using a Linux build agent) it fails with the following errors:
npm run build

ERROR in AppModule is not an NgModule

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@ngtools/webpack/src/loader.js:329:31)
 @ multi ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@ngtools/webpack/src/loader.js:329:31)

npm run test

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@ngtools/webpack/src/loader.js:329:31)
 @ multi ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@ngtools/webpack/src/loader.js:329:31)
 @ multi ./src/polyfills.ts

ERROR in ./src/test.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@ngtools/webpack/src/loader.js:329:31)
08 03 2017 11:25:15.129:ERROR [karma]: { Error: no such file or directory
    at MemoryFileSystem.readFileSync (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
    at doRead (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:205:29)
    at Plugin.readFile (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:210:7)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/src/polyfills.ts' }
08 03 2017 11:25:15.138:ERROR [karma]: { Error: no such file or directory
    at MemoryFileSystem.readFileSync (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.(anonymous function) [as readFile] (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:300:34)
    at doRead (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:205:29)
    at Plugin.readFile (/var/lib/jenkins/workspace/Intelliflo/Microservice.DeveloperHub/IP-14137/node_modules/@angular/cli/node_modules/karma-webpack/lib/karma-webpack.js:210:7)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/src/test.ts' }

OS?

Windows 8.1

Versions.

angular-cli: 1.0.0-rc.1
node: 6.10.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9
typescript: 2.2.1

jlouros picture jlouros on 8 Mar 2017
👍1

This specific error (TypeError: Cannot read property 'newLine' of undefined) seems to appear due to different versions of either TypeScript. If you're experiencing different behaviour on different machines, make sure you're using the same TS version everywhere.

You can test this by running npm ls typescript on your project. It's likely you have a bad mix of TS versions.

Angular version 2 works only with Typescript 2.0, while Angular version 4 works with 2.1 and up.

filipesilva picture filipesilva on 8 Mar 2017
👍6 👎1

@filipesilva thanks for your response. I was actually able to figure out the problem. As you stated on previous comments, this error is reported when an older version of Angular-CLI is installed. For me it was always picking [email protected] instead of rc.1. I was able to figure that out when I ran npm ls on build agent workspace. This was happening even when I followed the uninstall guide.

To fix this problem for me I had to:

  • after npm install run npm ls just to double check the installed angular-cli
  • ask a member from DevOps (or somebody with 'sudo' access on the build agent) to wipe-out the entire workspace and run npm cache clear

Hopefully this can you @egervari

jlouros picture jlouros on 8 Mar 2017
👍2 👎1

Hi
I'm having the same issue. My SO is W10, and I created the project two weeks ago.
I was working fine until today, I copied my code to make a new repo and cleand the "node_modules" folder, run npm install and doesn't work since then.
My main problem is that I also clean the original folder so I had to run npm install on both projects
I've tried every solution I could find and of course the angular-cli update guide. Nothing works.
I get this message and can't run any of my two projects.
This is my ng version:

@angular/cli: 1.0.0-rc.2
node: 6.10.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9
@ngtools/webpack: 1.2.13
MartinFreire picture MartinFreire on 15 Mar 2017

@egervari I'm not sure why but I rebuilt the built without cache and it passed on circleci. Hope it helps.

gamalielhere picture gamalielhere on 16 Mar 2017

Ok, so I could make it work.
I tried multiple times the steps in the update guide and didn't work form me.

This is the last set of steps I do and it works in my case:
1) Unistall NodeJS (yes I did that)
2) Delete all the folders in C:\Users{user}\AppData\Local\Temp that stars with npm
3) Delete the folder C:\Users{user}\AppData\Roaming\npm
4) Delete the folder C:\Users{user}\AppData\Roaming\npm-cache
6) Delete the folder node_module in both projects
5) Restart my PC (because I detected that W10 has some folders lock and that didn't let me run nmp cache clean
7) Install NodsJs
8) Run npm install --save-dev @angular/cli@latest
9) Run npm install
10) Run npm install --save-dev @angular/cli@latest AGAIN

I only repeated the npm install --save-dev @angular/cli@latest after the npm install once, so I don't know if had anything to do with the problem. After the second time I run this command I see that the library has changed (it was on yellow) `-- @angular/[email protected] (I guess this is wath I was doing wrong)

Hope it works for someone else!

MartinFreire picture MartinFreire on 16 Mar 2017
👍1

I had the same issue, after reading this entire thread and trying everything the problem still existed. Turns out that the cli was using a different version of webpack than what my project is using. Once I got those version in sync then the error went away. I have a new Angular 4 project Universal demo so the webpack outside the cli was for server side code i guess.

jbeckton picture jbeckton on 24 Mar 2017
👍2 🎉1

@egervari Have you had any luck with this? I think I'm in the same boat. Locally, my angular 2.4.5, cli 1.0.0-rc1 app runs fine with either Typescript 2.0.0 and 2.2.1, but neither work on TravisCI.

dancancro picture dancancro on 27 Mar 2017

FYI. Had this issue too, cli migration guides etc did not help .
Solved the problem removing "@ngtools/webpack" and "webpack" from my package.json dependencies and reinstalling all modules.
Hope it can save couple of hours of your time :)

thisisbb picture thisisbb on 29 Mar 2017
👍3 🎉1

Ran into this issue today. In our case it resulted from a mismatch of peer dependencies because we had almost all @angular packages at 4.0.0, @angular/cli at 1.0.0, but @angular/compiler-cli at ^4.0.0 which resulted in 4.0.2 being installed for that package. ng build failed with "Cannot read property 'newLine' of undefined" error.

doubletriplezero picture doubletriplezero on 13 Apr 2017

Have similar issue with tests on Travis-CI...with @angular/cli 1.0.0 & @angular 4.0.0

locally the tests ran fine.

Travis-CI
Uncaught TypeError: Cannot read property 'apply' of undefined

image

playground picture playground on 14 Apr 2017

We avoid using global commands (we only use local ng) for this and other reasons, as we believe build determinism is important, as is consistency between development and production build environments. I did encounter the error TypeError: Cannot read property 'newLine' of undefined today in one of my recently revived development environments, apparently due to old dependencies, as suggested above. Removing node_modules in the project and rerunning npm install, as recommended above, resolved the problem. The current dependencies of the project include:

    "@angular/cli": "1.0.0",
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@angular/router": "4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "~5.0.3",
    "typescript": "^2.1.4",
    "zone.js": "^0.8.4"

But it had been updated and rebuilt from older versions of angular (2.x) and angular-cli (1.x beta).

wcainboundary picture wcainboundary on 17 Apr 2017

I had the same Module build failed: TypeError: Cannot read property 'newLine' of undefined on a cloned copy of the app.

I have been working on a local version that had Angular 4.0.2, and when another developer pulled the latest version, they started getting that error. I made another cloned copy and was getting that error. I tried a bunch of the suggestions above.

Turned out all of the angular dependancies were on 4.1.0 but the @angular/cli was on 1.0.0. In my package.json, I had angular dependacies as ^4.0.0, and @angular/cli at 1.0.0. I changed "@angular/cli": "^1.0.1", rannpm install` and the app is back to compiling as expected.

nathanBrenner picture nathanBrenner on 2 May 2017

I have a project with exact same error, using @angular 4.1.3 and @angular/cli 1.1.0-rc.0 (tried 1.04 as well with the same result). So the project builds fine with
ng build --prod --aot=false
but fails with this error using ng build --prod.

I did some debugging of node_modules\@ngtools\webpacksrc\loader.js

And it turns out it breaks on these lines:

function ngcLoader() { 
...
const sourceFileName = this.resourcePath; //here is index.ts file, I'll show it later
const plugin = this._compilation._ngToolsWebpackPluginInstance; //plugin === undefined here!
if (plugin && plugin instanceof plugin_1.AotPlugin) { //and of course this is false
...
} else {
const options = loaderUtils.getOptions(this) || {}; //and options are {} here...
...
const compilerHost = ts.createCompilerHost(compilerOptions); //and of cource it breaks here
...
}
}

And the file on which it fails is index.ts:
export * from './GJLog.component';

I've also checked all the versions of all packages, cleaned cache, reinstalled node.. Everything.. But still the same problem in AOT mode. In the same time, it perfectly compiles with aot=false...

Any hints on what to debug next, which direction to investigate?

Thank you!

Elastep picture Elastep on 22 May 2017

Even more, the project builds just fine like this:
npm run ng build -- --aot=true --environment=prod --output-hashing=all --sourcemaps=false --extract-css=true

But does not build like this:
npm run build -- --prod --aot=true

Let's read the docs:

--prod also sets the following non-flaggable settings:

  • Adds service worker if configured in .angular-cli.json.
  • Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).
    +Runs UglifyJS on the code

I don't have any service workers, I don't use any process.env.NODE_ENV.

So this must be related to UglifyJS?

Can I somehow disable running uglify js just to make sure it's the reason?

Elastep picture Elastep on 22 May 2017

We have the same issue. With every new loader in webpack you get a new bug. Nothing is really tested :-(

j-nord picture j-nord on 23 May 2017
👍3

I've just opened a separate issue for this... So probably it'll attract more attention...

Elastep picture Elastep on 23 May 2017

Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter while doing ng serve , previously it was working from today it is giving problem

NayabHussain picture NayabHussain on 25 May 2017
👍1

Please also leave a note about your issue here:
https://github.com/angular/angular-cli/issues/6426

Elastep picture Elastep on 25 May 2017

There are some undocumented or badly documented things that --aot --prod does with your code. For example, cssnano is also run,
Please take a look https://github.com/angular/angular-cli/issues/6426 here for my solution.

Probably you made the same mistake as I did...

Elastep picture Elastep on 31 May 2017

Oh this is a painful bug.Uninstall reinstall more than 100 times but still not resolved
An
Module build failed: TypeError: Cannot read property 'newLine' of undefined.

"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/compiler-cli": "^2.4.0",
"@angular/core": "2.4.7",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/cli": "^1.0.0",

Some one please help! :(

lasath picture lasath on 1 Jun 2017

That's probably a bug in syntax like the one I had...
In my case it had nothing to do with dependencies...
Does it build in debug mode?

Elastep picture Elastep on 1 Jun 2017

Same here, it worked. I am still using 1.0.0 version, week ago everything fine, currently I got the newLine error.

mejmo picture mejmo on 1 Jun 2017

someone solve this error?
I have still trying to solve the next errors when I run ng serve

ERROR in multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4200' in '/Users/codebo1/Projects/monitor-client/client'
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/main.ts
Module build failed: Error: Cannot find module 'webpack/lib/dependencies/ContextElementDependency'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/codebo1/Projects/monitor-client/client/node_modules/@ngtools/webpack/src/plugin.js:9:34)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/codebo1/Projects/monitor-client/client/node_modules/@ngtools/webpack/src/index.js:30:10)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: Error: Cannot find module 'webpack/lib/dependencies/ContextElementDependency'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/codebo1/Projects/monitor-client/client/node_modules/@ngtools/webpack/src/plugin.js:9:34)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/codebo1/Projects/monitor-client/client/node_modules/@ngtools/webpack/src/index.js:30:10)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
 @ multi ./src/polyfills.ts
webpack: Failed to compile.
diegozambrana picture diegozambrana on 2 Jun 2017
👍2

Same here.
Recovered from backup that was really working fine: error.
All combinations of cache clean, uninstall, update: error!

JosepAlacid picture JosepAlacid on 3 Jun 2017
😕1

I've spent 16 hours working on this problem with a angular-cli project. I've tried every solution listed here, with nothing that gets it working. I wish I could provide a repro, but doesn't seem to happen with any other CLI project on my machine.

I feel pretty frustrated because I thought the Angular team had ironed out most of the issues with the CLI. But after this ordeal, I'm still not convinced it's a stable platform yet. The project in question had been left alone for 3 months, then cloning it onto my Windows 8 computer and reinstalling the npm dependencies causes the "newline" error message when I try to ng serve it. I tried everything on my MacBook Pro, too, and got the same error.

I think I'm just a crappy developer, but the complexity of this build process and tooling is just overwhelming. It seems any productivity gains that Angular provided me were wiped away by the time I've spent troubleshooting a black hole of build issues, like this one.

jongunter picture jongunter on 12 Jun 2017

Did you check my solution?

Elastep picture Elastep on 12 Jun 2017

Yeah, I greped my entire project for url("") and nothing came back, if that's what you mean.

I'm guessing it could be some other CSS-related syntax issue then? Unfortunately, I have over 100 components. Trying to debug which CSS file is causing the problem is going to take a while.

jongunter picture jongunter on 12 Jun 2017

I've spent a lot of time on this problem. But it solved just by update angular-cli from v1.1.0 to v1.1.1

Delysid picture Delysid on 13 Jun 2017

Guys you have to completely delete npm packages, in Windows it is in your
user profile. This problem caused the npm update on my machine. When I
cleaned all the packages previously downloaded in global, it works like a
charm.

On Jun 12, 2017 18:37, "Jon Gunter" notifications@github.com wrote:

I've spent 16 hours working on this problem with a angular-cli project.
I've tried every solution listed here, with nothing that gets it working. I
wish I could provide a repro, but doesn't seem to happen with any other CLI
project on my machine.

I feel pretty frustrated because I thought the Angular team had ironed out
most of the issues with the CLI. But after this, I'm still not convinced
it's a stable platform yet. The project in question had been left alone for
3 months, then cloning it onto my computer and reinstalling the npm
dependencies causes the "newline" error message when I try to ng serve it.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/3781#issuecomment-307844896,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFA0wSfzdWN2apG1G0dfoMr1bsZAZgF0ks5sDWkzgaJpZM4LXj2l
.

mejmo picture mejmo on 13 Jun 2017

Thanks for your responses. I tried the following on my Mac and PC with no solution:

  • Uninstalling node/npm and reinstalling
  • Removing all my global packages and reinstalling them
  • Removing all my local npm packages and reinstalling
  • Updating the CLI to v1.1.1
  • Followed the entire CLI migration guide
  • Deleted and re-cloned the project from source control
  • Updated node to the latest version (8.1.0)

Furthermore, this project in question seems to be working on one of my colleague's Macs, which is strange because it doesn't work on my Mac, which is the exact same model with the exact same MacOS version. I npm shrinkwraped the dependencies there and tried to remove all local/global node modules and reinstall on other machines. Still doesn't work.

We spent months putting this project together for a demo. I think I might be at my wits end with Angular right now. The fact that there's no useful error message or stack trace here is particularly infuriating for me.

jongunter picture jongunter on 13 Jun 2017

I've just discovered that if I check in node_modules from the "happy" computer, it works on both my other machines. Unfortunately, if I re-run npm install on those secondary machines, everything breaks again, meaning packages can only be installed/updated on one single dev's machine. Also, this is not a long-term solution, because checking in node_modules is a pretty bad practice, especially moving between MacOS and Windows.

Maybe @filipesilva has an idea?

jongunter picture jongunter on 13 Jun 2017

This seems to be a dependency issue, as copying the same package.json file into one of my blank "sandbox" cli projects yields the same error.

Check out my repro...this is broken on my machine, and I hope other people can reproduce this:
https://github.com/jongunter/broken-ng-cli

jongunter picture jongunter on 13 Jun 2017

I have the same issue:

ng -v

@angular/cli: 1.0.3
node: 8.0.0
os: linux x64
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.0.3
@angular/compiler-cli: 4.2.3
@ngtools/webpack: 1.4.1

tsc -v

Version 2.3.4

Errors: ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:9514:20)
at Object.createCompilerHost (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:63770:26)
at Object.ngcLoader (/var/www/education/client-apps/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:9514:20)
at Object.createCompilerHost (/var/www/education/client-apps/node_modules/typescript/lib/typescript.js:63770:26)
at Object.ngcLoader (/var/www/education/client-apps/node_modules/@ngtools/webpack/src/loader.js:397:33)
@ multi ./src/polyfills.ts

I try each manual of packages reinstalling/upgrading but nothing can helps me.
Are there any solutions?

andreaslancom picture andreaslancom on 20 Jun 2017
👍1

@filipesilva , this issue should be reopened. I have a reproducible test case posted above (if it's not reproducing the error for you, please let me know). Even if this is deemed as case of "operator error", there should be a more helpful error message to let the user know what's going on.

jongunter picture jongunter on 20 Jun 2017
👍2

I had this bug today because i was i had angular/cli version 1.1.2 installed, i resolved it by installing @angular/[email protected]

Steps include:
npm uninstall @angular/cli
npm install @angular/[email protected]

Hope that helps.

shahmhussain picture shahmhussain on 21 Jun 2017
👎1

If anyone was wondering, I have resolved this issue by ng newing a new project, and merging the package.json with my old non-working project (and trying to keep the dependencies from the new project). Luckily, everything worked, even though it meant a forced upgrade to Angular 4.

Still, I think this shouldn't be necessary...the error should tell me roughly what I need to fix.

jongunter picture jongunter on 21 Jun 2017

Thanks a lot. As @jongunter said I create new app and merge package.js and it's working now.

andreaslancom picture andreaslancom on 21 Jun 2017

I had the same error. I had to go through @MartinFreire 's steps and (don't ask me why) delete package.-ock.json .

ghost picture ghost on 22 Jun 2017

I looked into this during the weekend and have to say that @toverux explanation in https://github.com/angular/angular-cli/issues/3781#issuecomment-272284110 is spot on.

For projects using @angular/cli (and not @ngtools/webpack directly), this error happens if you have multiple versions of @ngtools/webpack in your dependencies. You can check if you do by running npm ls @ngtools/webpack (or yarn list @ngtools/webpack). You should remove any extra copies from your dependencies and make sure that your lock files are updated accordingly.

filipesilva picture filipesilva on 27 Jun 2017
👍6 ❤1 👎1

@filipesilva Thank you. npm prune saved this for me.

uberroot4 picture uberroot4 on 29 Jun 2017
👎1

Still receiving this error, despite having only one version of @ngtools/webpack installed.

npm ls @ngtools/webpack
+-- @angular/[email protected]
|-- @ngtools/[email protected]
-- @ngtools/[email protected]

jdrake3 picture jdrake3 on 19 Jul 2017

OS : Windows with Angular 4

"@angular/cli": "1.2.1",
"@angular/material": "2.0.0-beta.6",

I just removed the caret from above two dependencies and performed following steps, everything started working perfectly.

  1. Remove node_module
  2. Uninstall angular cli from local and global
  3. Install the same version of angular cli in both
  4. Do "npm install"
  5. "ng serve"
prabhatojha picture prabhatojha on 20 Jul 2017
😕2

ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/user/Documents/projects/ayo6/node_modules/@ngtools/webpack/src/loader.js:202:31)
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:9618:20)
at Object.createCompilerHost (/home/user/Documents/projects/ayo6/node_modules/typescript/lib/typescript.js:66867:26)
at Object.ngcLoader (/home/user/Documents/projects/ayo6/node_modules/@ngtools/webpack/src/loader.js:202:31)
@ multi ./src/polyfills.ts
webpack: Failed to compile.

I'm getting this when I run "ng serve".. Is this just a typescript error or more?

chikehenderson picture chikehenderson on 20 Jul 2017

OK, as many others have mentioned this is due to version mismatches with webpack or angular-cli, but never seems to be fixed by deleting the node_modules folder or re-installing / uninstalling packages manually.

I FINALLY managed to get this working by deleting node_modules folder AND the package-lock.json file... Then running npm install seemed to fix this for me.

macandcheese picture macandcheese on 26 Jul 2017

If I remember correctly my fix to the issue went something like this..

rm -r npm_modules
sudo -i npm clear cache
sudo npm -g uninstall @angular/cli
perhaps "npm uninstall @angular/cli" locally if need be..
then install with npm again, I realised my problem was that somehow.. I
managed to have a local version
that was different that the global version and the older one was being
used..

check versions ng -v, etc..also I used npm3 not npm ;)

On Wed, Jul 26, 2017 at 6:00 PM, Adam Tirella notifications@github.com
wrote:

OK, as many others have mentioned this is due to version mismatches, but
never seems to be fixed by deleting the node_modules folder or
re-installing / uninstalling packages.

I FINALLY managed to get this working by deleting node_modules folder AND
the package-lock.json file... Then running npm install seemed to fix this
for me.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/3781#issuecomment-318133980,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGDyiP0_rQVX4NhNTuK22b861u3DCFmmks5sR37AgaJpZM4LXj2l
.

chikehenderson picture chikehenderson on 26 Jul 2017
👎1

Hey, guys, my problem was solved due @macandcheese comment -

I FINALLY managed to get this working by deleting node_modules folder AND the package-lock.json file... Then running npm install seemed to fix this for me.

the @filipesilva rightly explained the reason of issue -

For projects using @angular/cli (and not @ngtools/webpack directly), this error happens if you have multiple versions of @ngtools/webpack in your dependencies. You can check if you do by running npm ls @ngtools/webpack (or yarn list @ngtools/webpack). You should remove any extra copies from your dependencies and make sure that your lock files are updated accordingly.

skiminock picture skiminock on 30 Apr 2018
🎉1 👍1

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[bot] picture angular-automatic-lock-bot[bot] on 8 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

donaldallen picture donaldallen  Â·  3Comments
JanStureNielsen picture JanStureNielsen  Â·  3Comments
hareeshav picture hareeshav  Â·  3Comments
sysmat picture sysmat  Â·  3Comments
rwillmer picture rwillmer  Â·  3Comments