Angular-cli: Angular Compiler Error (seems to be the wrong instance)

[messerbill]

when I try to run "ng serve" I run into the following issue:

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.

Following this suggestion:

$ npm ls @ngtools/webpack
[email protected] C:\Daten\Projects\test
-- @angular/[email protected] -- @ngtools/[email protected]

So there are no multiple webpack versions installed. I tried to reinstall @angular/cli for multiple times....globally, locally, after deleting node_modules and using npm cache clean -f and npm cache verify. I did the same with webpack. Sadly there are not really many other people running into this issue, what makes it hard to solve. My google researches were not successfull due to all i could found was a chinese page translating that error into chinese and these two SO links (which do not provide a solution for me):

https://stackoverflow.com/search?q=Angular+Compiler+was+detected

https://stackoverflow.com/questions/48774405/error-several-ngtools-webpack-packages-installed

https://stackoverflow.com/questions/47094987/share-node-modules-between-meteor-1-6-server-angular-cli-client-angular-mete

my package.json:

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.2",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "2.6.2"
  }
}

note:

The project can be compiled at my brothers PC - the only difference is the OS (he uses win7 while i use win10).

greetings and have a nice week end,

Messerbill

edit:

Updating @angular to 5.2.7 makes no difference.

[clydin]

The full command suggestion is actually npm ls @ngtools/webpack. The error is due to multiple versions of the @ngtools/webpack package being present in the project. You can try deleting both the package-lock.json file and the node_modules folder and then install again.

[messerbill]

Hi,
thanks for your answer. npm ls @ngtools/webpack is exactly what i did (as i wrote in my question).

You can try deleting both the package-lock.json file and the node_modules folder and then install again.

this is what i tried hundrets of times

The error is due to multiple versions of the @ngtools/webpack package being present in the project.

no - my npm ls @ngtools/webpack does NOT return multiple versions.

edit

sorry, due to the markup the full npm ls @ngtools/webpack was not visible

npm ls -g also shows no webpack installed globally

edit edit:

ng serve and ng build does not make any differences:

(due to the bad screenshot you cannot see completley, that the global ls is just the same like the local. But if i remove the global, my ng command is not found anymore.

[messerbill]

Finally. Updating my global typescript version fixed it. Now using tsc 2.6.2 globally and it works.

[yanlee26]

It's really tricky!

[Darkein]

Corrected the problem by using yarn!

I had the same problem. Delete node_modules folder and make an npm install doesn't change anything, but it worked with a yarn install :)

[mialy]

I have today exactly the same issue as in the screenshot of @messerbill

Fixed it by deleting (or renamed) node_modules/ in parent directories (parents of the project directory itself). Seems like npm or angular searches for node_modules in whole directory tree recursively, don't know...

[nhhockeyplayer]

sometimes we like to park node_modules in a close area to avoid having to wait for deleting it...
thats a no no
npm will find it and screw up your build

but thats not the problem with this issue

could be typescript version I am still wrestling with the webpack packages thing

[danielmhair]

Since I have had this error multiple times (I have 3 libraries and 4 apps in a mono-repo, quite like @angular/*. I figured out the error in the first 2 libraries and forgot to fix it in the last library and had to figure it out all over again. For future reference for others (and in case I forget again), my fix was to make sure that @angular-devkit/build-angular and @angular-devkit/build-ng-packagr are only in the root package.json. For example, if I had the following structure:

- package.json <== should have both packages (@angular-devkit)
- lib-1
  - package.json <== should NOT have @angular-devkit packages
- lib-2
  - package.json <== should NOT have @angular-devkit packages
- lib-3
  - package.json <== should NOT have @angular-devkit packages

So to fix this, I needed to remove @angular-devkit from my libraries like so:

1. Ensure you are in the lib folder
2. yarn remove @angular-devkit/build-angular && yarn remove @angular/build-ng-packagr
3. Ensure its removed from package.json
4. Ensure its removed from yarn.lock file after removal (3 & 4 should be automatic)
5. Re-run command causing the issue.

[irfanku]

Worked for me, thanks.

[gajalchouhan]

please someone help me to sort out this thing.
I tried to install new version of typescript and node modules. I am still getting the same error.

[messerbill]

@gajalchouhan
some advises from my site:

• uninstall local angular cli
• uninstall global angular cli
• uninstall global typescript
• (if you're on windows uninstall node.js)
• delete package-lock.json
• delete angular/cli dependencies from package.json
• install latest node.js and npm
• install typescript
• install latest angular cli (globally and locally)
• try it

I am sure that not every of these steps is needed, but due to the error is very missleading you should follow these steps. I am quite sure that it will work afterwards.

Greetings

[gajalchouhan]

Please, someone, suggest to me that I am facing the same problem.
Actually my project in Angular version 1.0.0-beta.28.3. I am using angular as global angular 6.2.2.
when I am trying to use ng serve this error has come. Can anyone suggest me that what should I do?

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 (/home/gajal/lok/AuBankProject/node_modules/@ngtools/webpack/src/loader.js:458:19)
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/polyfills.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 (/home/gajal/lok/AuBankProject/node_modules/@ngtools/webpack/src/loader.js:458:19)
@ multi ./src/polyfills.ts

[gajalchouhan]

[messerbill]

@gajalchouhan did you follow the steps i wrote earlier?

[DivyanshuLoktra]

@gajalchouhan did you follow the steps i wrote earlier?

I did all of those
no results

[DivyanshuLoktra]

So i was able to remove the "instance of wrong class" error
But facing a new one now
ERROR in Error: No NgModule metadata found for 'AppModule'.

[Dafnik]

How did you fix it?

[DivyanshuLoktra]

1) uninstall local and global version of angular
2) reinstall it
3) try again and again

EDIT1>
The issue returned
Its a brain burner
I dont know what is going wrong in there

[messerbill]

@DivyanshuLoktra I really recommend to uninstall everything, Angular, Angular Cli, Typescript, Node and npm. Make sure that you also remove the global npm modules. Afterwards reinstall everything and care for the versioning.

[DivyanshuLoktra]

Bill,
I was able to run the project, Had to uninstall things locally for a while. But things are running now.
The only thing is I do not know how and why ?

Here are the commands
1) sudo npm remove webpack
2) sudo npm install --save-dev @angular/[email protected]
3) sudo npm install --save-dev [email protected]

Command 1 will remove the "instance error"
But you will face the module error after it.

Now do command 2) I did not uninstalled or removed anything , just ran command 2

In my case I was getting warning that the typescript version is 2.7.2, it should be between 2.4.0 and < 2.5.0 ( '<' is less than)
so for the safe case i installed 2.4.0
and as of now things are working
But i am pretty sure its going to break.

I will do more experiments post this and let everyone know.

[valorad]

This error pops up when I was using pnpm on Windows, changing to npm solved this issue.
I guess it has something to do with pnpm mis-configuring the dependency links.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}