CODEWITHSUNDEEP
angularwebpackangular-cli
An-droid
An-droid

Reputation: 6485

Multiple webpack in angular cli configuration

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 ?

Upvotes: 5

Views: 8426

Answers (3)

Nɪsʜᴀɴᴛʜ ॐ
Nɪsʜᴀɴᴛʜ ॐ

Reputation: 2904

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]

Upvotes: 0

Jia Ma
Jia Ma

Reputation: 81

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!

Upvotes: 8

alexKhymenko
alexKhymenko

Reputation: 5598

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

Upvotes: 4

Related Questions