Multiple webpack in angular cli configuration

Question

Im trying to do tests with karma but a get an error :

ERROR in ./src/test.ts Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class. This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.

When I execute the cmd I get this result :

+-- @angular/[email protected] | `-- @ngtools/[email protected] `-- @ngtools/[email protected]

In my package.json I only have @ngtools/webpack": "^1.5.1

Where is this 1.4.1 coming from ?

The answer is right before your eyes. It's a sub-dependency of the angular cli. — JSON Derulo
– JSON Derulo, Commented Sep 18, 2017 at 14:16

Jia Ma · Accepted Answer · 2018-03-14 17:08:57Z

I have seen this issue many many times. And previously I just solved randomly by accident. And today I just figured out that the reason why you see this message is because the @angular/cli version in your "devDependencies" in your package.json doesn't match with your dependencies' version. For example, after I run npm ls @ngtools/webpack, I see the following: [email protected] /Users/jma/atom-web-accessibility ├─┬ @abot/[email protected] │ └─┬ @angular/[email protected] │ └── @ngtools/[email protected] └─┬ @angular/[email protected] └── @ngtools/[email protected]

So now I have to go to my package.json, under "devDependencies", change the version number "1.7.3" to be "1.4.7". Then run the following: rm -rf node_modules

rm -rf package-lock.json

npm cache clean -f

npm install

ng build

npm start

then I see webpack: Compiled successfully.

tada!!!! Hope this helps!

Thanks for the answer, This is definitely the way to go. Same answer as @alexKhymenko but more detailed

alexKhymenko · Accepted Answer · 2017-09-18 14:15:14Z

4

Its comming from angular cli. Remove yours from package json. Reinstall modules. And it will work.

answered Sep 18, 2017 at 14:15

alexKhymenko

5,64826 silver badges40 bronze badges

2 Comments

alexKhymenko Over a year ago

It happens to all of us :-) No problem

messerbill Over a year ago

reinstalling, deleteing node_modules folder, clearing npm cache etc did not fix it. currently i am using "@angular/cli": "^1.7.0" npm ls @ngtools/webpack shows only one webpack...Error is:

Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class. This likely means you have several @ngtools/webpack packages installed.

Nɪsʜᴀɴᴛʜ ॐ · Accepted Answer · 2018-09-10 16:14:35Z

To remove it from the dependencies in package.json, you will need to use the save flag:

npm uninstall --save webpack

If you have installed the package as a "devDependency" (i.e. with --save-dev) then --save won't remove it from package.json. You need to use --save-dev to uninstall it. Here is the outcome of the above command

$ npm ls @ngtools/webpack [email protected] C:\Apache24\htdocs\angularapp +-- @angular-devkit/[email protected] | `-- @ngtools/[email protected] `-- @ngtools/[email protected]

$ npm uninstall --save webpack > [email protected] install C:\Apache24\htdocs\angularapp\node_modules\node-sass > node scripts/install.js Cached binary found at C:\Users\user\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-59_binding.node > [email protected] postinstall C:\Apache24\htdocs\angularapp\node_modules\node-sass > node scripts/build.js Binary found at C:\Apache24\htdocs\angularapp\node_modules\node-sass\vendor\win32-x64-59\binding.node Testing binary Binary is fine added 1106 packages in 677.641s

$ npm ls @ngtools/webpack [email protected] C:\Apache24\htdocs\angularapp `-- @angular-devkit/[email protected] `-- @ngtools/[email protected]

Collectives™ on Stack Overflow

Multiple webpack in angular cli configuration

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related