ng build fails with error Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after updating to v1.3.0

[MarkTiedemann]

Bug Report or Feature Request (mark with an x)

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

Versions.

λ ng -v
     
@angular/cli: 1.3.0
node: 8.1.2
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1                              

Repro steps.

ng build fails with error Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after updating to v1.3.0.

   "devDependencies": {
-    "@angular/cli": "1.2.7",
+    "@angular/cli": "1.3.0",

The log given by the failure.

λ ng build

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    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> (<redacted>\node_modules\html-webpack-plugin\lib\compiler.js:11:26)
    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> (<redacted>\node_modules\html-webpack-plugin\index.js:7:21)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)

Mention any other details that might be useful.

Might be related to #6641.

Installing webpack as a devDependency can be used as a workaround.

[nekkon]

@MarkTiedemann Had the same issue. Didn't install webpack as a workaround. Fixed it by replacing my package.json dependencies with those of a new app (ng new testapp) and reinstalling npm modules. Before reinstalling remove package-lock.json and run npm cache verify. I do have to say, it would be great, if updates could be applied in a better way. (Also I noticed that there was a change in tsconfig, "lib": ["es2017", ) There should be a guide/way an existing project can update to the last version automatically/easily. One way used to be with ng init but that checked/replaced all files.

[nekkon]

@filipesilva I believe it is necessary to have a way/script that will automatically update an app that was generated from a previous version of angular-cli. Something like this is possible.

[nekkon]

@filipesilva @hansl I do believe I can make a tool for angular-cli that will manage updates. It would detect changes between versions (apps generated with ng new) and apply them properly. (even if end-user has changed things) This would help to easily upgrade existing angular-cli projects.

Some first features of this tool:

1. Would take the burden off Angular-cli team whenever there is an update as everybody would easily be able to update their projects. This tool would be tested each time against various apps/scenarios/environments that everything is working properly after the update. (just changing the version number in package.json is not enough nor what ng init used to do, checking/replacing all files)
2. Rollback Feature: Whenever there would be an issue with an update, you would be able to revert back easily
3. Validation Feature: All users would have their projects updated properly (check if necessary changes have been applied). Usually there are various changes needed in config files which users do not apply cause they just change the version number.

What do you think of this? If there is something already, or you have a better way of doing it, feel free to tell me. I just made a suggestion.

[valdestron]

@filipesilva comment that we should not add webpack to dependencies in package.json anymore it can cause various unexpected errors like this one with webpack version missmatch #6417.
By the way in 1.3.1 I can not reproduce this issue anymore.

In my opinion auto updater tool is not that helpful especially when there is not that much to compare when upgrading a local @angular/cli version. Also I dont see why we should use auto updater of package.json according to new @angular/cli deps versions because its usually not relevant. For example @angular/cli@1.3.1 using @angular~4.2.4 but current version is 4.3.5. In this case ncu is more than enough.

[nekkon]

@valdestrijus During Angular-cli updates package.json is not the only file that could change. There are other changes that could happen in other config files also (tsconfig.json, karma.conf.js, angular-cli.json, tslint.json, protractor.conf.json, test.ts) If you don't change those files properly then your apps could have errors/issues.

@valdestrijus Why not have an automated way that those files get updated? Why do you prefer users not updating their apps properly (by just changing the version in package.json ). This causes afterwards many unnecessary issues in this repo with complaints that things got broken. (while the problem was that they generally don't update their app properly) This causes unnecessary waste of time for the Angular-CLI team to deal with such issues which could had been avoided in the first place.

[CharlBest]

Changing es2016 to es2017 in my root tsconfig.json file fixed this issue for me.

But I totally agree with @nekkon. I like keeping up to date en trying out the new features so what I try and do is create a new app (ng new appname) and then look at all the files generated and see what changed from my files. But off course my files keep on changing with new stuff so its very difficult to compare.

So looking forward to #7375 😄

[valdestron]

@nekkon Sure there are like few more configs to update with each @angular/cli version, but i can bet that as the project grows all those configs are customized anyways. For example in karma.conf.js I always add different reporters for my project than it is in default @angular/cli project. Speaking about tslint.json configuration - you cant update it automatically because various teams have different rules for their projects and usually this config is customized. .editorconfig is also not used by every team and will be custom. The only config that can be updated automatically would be angular-cli.json, but still is it worth to build such a tool for one configuration ? Ok, maybe there are some more, but still more config files are customized by the devs than not.

Other thought. If we still have a tool which will update our configs upon each release and work 99.99% of the time on each angular-cli release. You cant enforce to use it. And the dumb issues with configuration mismatch would not disappear.

In my opinion if we agree that we are using angular-cli for complex projects and developers are overriding configs they should take responsibility to keep it up with the new versions. And it is relatively easy, especially after beta, you dont need to change configs upon each release.

P.S. As a dev I would not trust a tool which will automatically change all the default configs of angular-cli where I also did various customisations.

P.P.S. IMO @angular/cli team is doing great job by backwards supporting older versions of @angular/cli without changing configs that is available for developer. If they keep up with this practice we will have (we already have) a product which will always be compatible with configs that developer can change and the internal configs, like webpack and other that is managed by @angular/cli team. So the team should always keep the balance what developer can change that is not breakable in the future releases and what should be managed internally.

[pumano]

I got that problem, and can't resolve it since 1.3.2 but I found I use local path to angular/cli ./node_modules/.bin/ng build --prod --aot --no-progress on postinstall hook (for heroku).

After I change it to ng build --prod --aot --no-progress (globally installed latest angular/cli) it fix my problem. Also it can be problem with npm cache. Delete package-lock file then delete node_modules and reinstall packages - also can be helpful.

[tapas4java]

I faced this issue many times recently and always the fix worked for me is :

rm -rf node_modules
rm package-lock.json
npm install

[GeorgeKnap]

Adding webpack to devDependecies solved this for me.
Also make sure you have the es2017 lib in your tsconfig.json as @CharlBest pointed out.

[Sayaren]

rm -rf node_modules
rm package-lock.json
npm cache verify
npm install

[sayemul]

This worked for me. :)

[jackkoppa]

Deleting node_modules & package-lock.json, verifying cache, then fresh install worked for me as well. Thanks for the succinct summary, @Sayaren

[filipesilva]

Closing as it seems this was a problem with node modules.

[tommck]

I just got this same problem with the latest version of angular cli today.

[jayaraman1234]

Error:::::::: > Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

versions

Angular CLI: 1.5.0
Node: 8.9.4
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
typescript: 2.4.2

webpack: error

pleasse help how to solve this

[roymj88]

Doing the following steps resolved it for me:

npm remove webpack
npm install webpack@3.11.0 

[rvanlaak]

We now adopted the following script in our package.json. That way the global webpack can be used, which saves us 600 packages in node_modules.

"webpack-setup": "npm i -g webpack webpack-serve webpack-cli webpack-hot-client && npm link webpack webpack-serve webpack-cli webpack-hot-client --save-dev"

[tommck]

@rvanlaak need to specify versions so that you don't break your app when webpack updates

[angular-automatic-lock-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.}