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

Question

problem

ng serve

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

Error Reporting 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 check

there is still a problem.

• Any suggestion is welcome.

Answer 1

This problem arose for me after starting ng ejectand trying to run my karma tests.

Despite the fact that I do not think this is the optimal solution, I worked on the problem:

• Delete @ngtools/webpack

  $ npm remove --save @ ngtools / webpack

• A requirement @ngtools/webpackthat is a child dependency @angular/cliin my webpack.config.js

  // webpack.config.js
     //
   // Other require statements
   const { AotPlugin } = 
  require('./node_modules/@angular/cli/node_modules/@ngtools/webpack');
  

  /*   *  /*

    module.exports = {
      // ...
  
       "module": {
      "rules": {
       // ...
        {
        "test": /\.ts$/,
        /* REMOVE: "loader": "@ngtools/webpack", */
        "loader": 
          "./node_modules/@angular/cli/node_modules/@ngtools/webpack"
            }
       }
       // ...
       }
       }
  

Answer 2

@ angular/cli@1.4.9 @ngtools/webpack @1.7.4

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

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   

Answer 3

, .

ng -v , , / .

node 8, . nvm .

nvm link one

nvm

nvm

Answer 4

I had the same error. Just updated angular-cli and updated npm, and everything is fine.

I'm starting to suspect that updating angular-cli is the ongoing equivalent of "have you tried turning it on again and again?";)