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

[hozefam]

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\lib\typescript.js:8062:20)
at Object.createCompilerHost (D:\Hozefa\Ang\FirstApp\TestApp\node_modules\ty
pescript\lib\typescript.js:44978:26)
at Object.ngcLoader (D:\Hozefa\Ang\FirstApp\TestApp\node_modules@ngtools\we
bpack\src\loader.js:171:31)
@ multi main

[filipesilva]

Can you provide repro steps please?

[bstaley]

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

[donvadicastro]

Where webpack configuration is placed inside bootstrapped project?

[toverux]

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.

[phamlehoaian]

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!

[toverux]

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

[phamlehoaian]

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

[filipesilva]

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.

[phamlehoaian]

@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?

[filipesilva]

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

[phamlehoaian]

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

[filipesilva]

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