Error: several @ngtools/webpack packages installed

Question

UPDATE: upgrading to 1.7.0.beta.1 fixed the issue, but now I'm getting another error:

ERROR in ./src/main.ts
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. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (C:\Users\multi\Desktop\portfolioWeb\node_modules\@ngtools\webpack\src\loader.js:458:19)
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/polyfills.ts

Answer 1

I had this same error. Open your package.json in your project directory and try removing the line that installs webpack (@ngtools/webpack) - it seems that it's installed anyway with the new 1.7.0. At least in my project this fixed the issue. Then reinstall ang-cli. I don't know if reinstall is required - you might just try running 'npm prune' after modifying the package.json - this should remove modules that are not present in your package.json.

You can check if the duplicate has been removed by running the recommended 'npm ls @ngtools/webpack' - it should only show the version you installed and not the previous one.

Answer 2

I have faced this issue during upgrading in order to remove any extra packages of @ngtools/webpack 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
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
+-- @angular-devkit/build-angular@0.7.5
| `-- @ngtools/webpack@6.1.5
`-- @ngtools/webpack@6.2.1

---

$ npm uninstall --save webpack
> node-sass@4.9.3 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

> node-sass@4.9.3 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
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
`-- @angular-devkit/build-angular@0.7.5
  `-- @ngtools/webpack@6.1.5

Answer 3

I deleted the file package-lock.json also deleted the content from the folder node_modules, then I executed npm install, after that ng serve command