Error: AotPlugin was detected but it was an instance of the wrong class

Viewed 5341

problem

ng serve

Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.

Full error report log

  ERROR in ./src/main.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.
  at Object.ngcLoader 
 (D:\testingapp\node_modules\@ngtools\webpack\src\loader.js:358:19)
  @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

npm ls @ngtools/webpack

testingapp@0.0.0 D:\testingapp
 +-- @angular/cli@1.2.6
 | `-- @ngtools/webpack@1.5.5
`-- angular-cli@1.0.0-beta.28.3
 `-- @ngtools/webpack@1.5.1

npm cache verify

still problem still exist.

Any suggestion is most welcome.

4 Answers

I recently had very a similar problem with a different version @angular/cli@1.4.9 and @ngtools/webpack@1.7.4

├─┬ @angular/cli@1.4.9
│ └── @ngtools/webpack@1.7.4
└── @ngtools/webpack@1.7.4

The code below can be found along with the instructions at https://github.com/angular/angular-cli/wiki/stories-1.0-update

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

npm uninstall -g @angular/cli
npm uninstall --save-dev @angular/cli 

rm -rf node_modules dist
npm cache clean

npm install -g @angular/cli@latest
npm install --save-dev @angular/cli@latest
npm install   
Related