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

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 test@0.0.0 C:\Daten\Projects\test -- @angular/cli@1.7.2 – @ngtools/webpack @1.10.1

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 22 (1 by maintainers)

Most upvoted comments

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:

root
- 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:

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

danielmhair on Jul 9, 2018

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

messerbill on Mar 4, 2018

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.

clydin on Mar 2, 2018

Worked for me, thanks.

irfanku on Jul 10, 2018

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:

test

(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 on Mar 4, 2018