Angular Compiler Error (seems to be the wrong instance)

Question

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

Error: several @ngtools/webpack packages installed

Share `node_modules` between Meteor 1.6 server & Angular CLI client Angular-Meteor subprojects?

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 another PC - the only difference is the OS (he uses win7 while i use win10).

greetings and have a nice week end,

Messerbill

Have you tried deleting node modules and doing `npm install` — BeeBee8, Mar 02 '18 at 17:54
@BhushanBabar there is nearly nothing else i did during the last days...deleting `node_modules`, afterwards `npm cache clean -f` and `npm cache verify` and then again `npm install` - still same error — messerbill, Mar 02 '18 at 17:59
Can you check if you accidentally have a globally installed webpack? `npm ls -g` — András Szepesházi, Mar 02 '18 at 19:46
@AndrásSzepesházi yea, in fact i had a webpack installed globally. I removed it, deleted node_modules in the project folder, cleared npm cache and did `npm install` again. same error; there is still the webpack-dev-server installed globally. may this be the reason? — messerbill, Mar 02 '18 at 19:53
all i have is an `angular@cli@1.7.2` globally and locally - this had never caused any problems before and i tried without the one and the other, still the same. — messerbill, Mar 02 '18 at 20:27

KTCO · Answer 1 · 2018-03-04T20:05:23.837

0

I just had the same problem. Not sure if it is related to upgrading to Angular CLI 1.7.2 or not (I upgraded from 1.6.1).

This is what I did to resolve it:

Nuked the project node_modules folder (just running npm install didn't fix it).
Opened command prompt in Windows 10 as Administrator (may be overkill).
Ran npm install in project folder.
In the vscode terminal I then ran ng build successfully.
Then I ran ng serve successfully.

I see from the comments that you already tried some of this, but these steps worked for me :-)

"devDependencies": {
    "@angular/cli": "1.7.2",
    "@angular/compiler-cli": "5.2.7",
    "@types/node": "9.4.6",
    "codelyzer": "4.2.1",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "2.4.2"
}

edited Mar 04 '18 at 20:05

answered Mar 04 '18 at 19:45

KTCO

2,115
23
21

You could try looking at the loader.ts source code for clues: https://github.com/angular/angular-cli/blob/3a3993e9ed2aaba16734c31c5eb73615d27b43de/packages/%40ngtools/webpack/src/loader.ts – KTCO Mar 04 '18 at 20:36
actually i try to reproduce the error on another system – messerbill Mar 04 '18 at 20:47
Finally. Updating my global typescript version fixed it. Now using tsc 2.6.2 globally and it works. – messerbill Mar 04 '18 at 21:50
1

Nice. I have tsc 2.3.4 globally. – KTCO Mar 04 '18 at 21:58

score 0 · Accepted Answer · answered Mar 04 '18 at 21:53

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

Now using the following:

typescript 2.6.2 (globally and locally)
@angular/cli 1.7.2 (globally and locally)
- webpack 3.11.0
node -v 8.9.1
npm -v 5.5.1

score 0 · Answer 3 · answered Mar 27 '18 at 14:23

0

try to delete your node_modules, and use yarn install instead of npm install. It worked for me :)

answered Mar 27 '18 at 14:23

Pierre Fiorelli

129
6

Hi thank you for your reply but this answer does not fit the SO requirements. This is more likely a comment. And I do not use `yarn`. I already fixed my problem by updating the global `typescript` version (like explained in my answer) – messerbill Mar 27 '18 at 14:30

score 0 · Answer 4 · answered Sep 10 '18 at 16:46

To remove the extra copies and from the dependencies in package.json, you will need to use the save flag:

npm uninstall --save webpack

If you have installed the package as a "devDependency" (i.e. with --save-dev) then --save won't remove it from package.json. You need to use --save-dev to uninstall it. Here is the outcome of the above command working good.

$ npm ls @ngtools/webpack
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
+-- @angular-devkit/build-angular@0.7.5
| `-- @ngtools/webpack@6.1.5
`-- @ngtools/webpack@6.2.1

$ npm uninstall --save webpack
> node-sass@4.9.3 install C:\Apache24\htdocs\angularapp\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\user\AppData\Roaming\npm-cache\node-sass\4.9.3\win32-x64-59_binding.node

> node-sass@4.9.3 postinstall C:\Apache24\htdocs\angularapp\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Apache24\htdocs\angularapp\node_modules\node-sass\vendor\win32-x64-59\binding.node
Testing binary
Binary is fine
added 1106 packages in 677.641s

$ npm ls @ngtools/webpack
angularapp@0.0.0 C:\Apache24\htdocs\angularapp
`-- @angular-devkit/build-angular@0.7.5
  `-- @ngtools/webpack@6.1.5

Angular Compiler Error (seems to be the wrong instance)

4 Answers4