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

Question

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

---

[email protected] D:\testingapp
 +-- @angular/[email protected]
 | `-- @ngtools/[email protected]
`-- [email protected]
 `-- @ngtools/[email protected]

---

npm cache verify

still problem still exist.

Any suggestion is most welcome.

Answer 1

This problem occured for me after running ng eject and trying to run my karma tests.

Even though I do not think that this is an optimal solution I worked around the problem by:

1. Removing @ngtools/webpack

   $ npm remove --save @ngtools/webpack

2. Requiring the @ngtools/webpack that is a child dependency of @angular/cli in my webpack.config.js

   // webpack.config.js
      //
    // Other require statements
    const { AotPlugin } = 
   require('./node_modules/@angular/cli/node_modules/@ngtools/webpack');
   /* 
   * Change the loader 
   /* 
   
     module.exports = {
       // ...
   
        "module": {
       "rules": {
        // ...
         {
         "test": /\.ts$/,
         /* REMOVE: "loader": "@ngtools/webpack", */
         "loader": 
           "./node_modules/@angular/cli/node_modules/@ngtools/webpack"
             }
        }
        // ...
        }
        }
   

Answer 2

I recently had very a similar problem with a different version @angular/[email protected] and @ngtools/[email protected]

├─┬ @angular/[email protected]
│ └── @ngtools/[email protected]
└── @ngtools/[email protected]

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   

Answer 3

I had the same issue and its fixed now.

First check versions of all your dependencies using ng -v and check the same for other working app and you'll surely get some version differences, so try to downgrade/upgrade to working ones.

In my case, I had node 8 installed which was causing the same issue. By simply downgrading via nvm solved my problem.

how to install nvm link one

how to install nvm link two

you can follow either of links to install nvm

Answer 4

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

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