Angular-cli: Cannot find module 'webpack'

[miladkc]

Bug Report or Feature Request (mark with an x)

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

Area

- [ ] devkit
- [ ] schematics

I don't know

Versions

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.6.8
@angular-devkit/build-angular   0.6.8
@angular-devkit/core            0.6.8
@angular-devkit/schematics      0.6.8
@angular/cdk                    5.2.4
@angular/cli                    6.0.8
@angular/material               5.2.4
@schematics/angular             0.6.8
@schematics/update              0.6.8
rxjs                            5.5.8
typescript                      2.4.2

node; v8.11.3
npm: 5.6.0
Windows 10

Repro steps

We had an existing angular application, that was in version 5, and was built using CLI 5. A colleague who is newly joined to the team installed a fresh PC, and gets this error.
The point is, creating a new application is OK and works just fine. But for our old app we get this error and we couldn't solve it.

The log given by the failure

Cannot find module 'webpack'
Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Taak\PixelearnWeb\school\node_modules\mini-css-extract-plugin\dist\index.js:15:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Taak\PixelearnWeb\school\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)

Desired functionality

When node and npm and angular/cli and angular and material are installed globally, things work out of the box with minimum friction.

Mention any other details that might be useful

[alan-agius4]

Have to tried removing the entire node_modules directory and installing it again?

[LeoUrzua]

You can also try to uninstall and install that specific module

• Npm

npm uninstall --save webpack
npm install --save-dev webpack

Or

• Yarn

yarn remove webpack --dev
yarn add webpack --dev

[andrewgremlich]

Installing webpack works for me, but then now

ERROR in No NgModule metadata found for 'AppModule'.

pops up.

However I can get around this error by just making a quick change and angular compiles fine.

What about getting past this metadata error?

EDIT:
Nevermind! I found Angular's update instructions, and I think the one command I didn't do was ng update @angular/core. All good now!

[beradrian]

What fixed the issue for me was to update npm. I was using 5.1.1 and now I updated to 6.2 and the error was gone.

[alan-agius4]

Seems like the issue has been resolve. If not please open a new issue. Thanks

[Seh83]

Try this...

npm uninstall --save webpack
npm install --save-dev webpack

[gtzinos]

Why do we have to install webpack ? In a clean installation, it works without this package.

[dc-p8]

Why do we have to install webpack ? In a clean installation, it works without this package.

I was asking myself the same question. In a fresh Angular project, webpack is not in dependencies. In the old Angular project, I ran ng update @angular/core @angular/cli, and noticed webpack was still in my dev dependancies, while my two projects had the same versions of angular. I tried to remove it but it's not possible.

Finally I fixed this by deleting the package lock and node_modules, and reseting the npm cache.

[gtzinos]

Sometimes i believe that this package.lock is there only to produce more issues.

[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._}