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 ?

Answer 1

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!

Answer 2

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