An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'

Question

I've just started my first job and tasked to work on an old project which will be updated.

I've given a new computer so I installed node.js, Visual Studio new versions.

As I mentioned I am working with an old project on WebStorm and I get this error:

An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'

When I searched it I found some solutions related to @angular/compiler-cli not with @angular/compiler-cli/ngcc.

I've tried:

erasing Node_Module and erase cache forcefully.
npm uninstall @angular/compiler-cli and instal it again.
tried to update manually but it did not fixed.

Here is my package.json file

{
  "name": "retail-report-mobile",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:en": "ng serve --aot --i18nFile=src/locale/language.en.xlf --i18nFormat=xlf --locale en",
    "build": "ng build --prod --build-optimizer --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.7",
    "@angular/cdk": "^6.4.2",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.2",
    "@angular/material-moment-adapter": "^7.3.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngx-translate/core": "^10.0.2",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-font-awesome": "^3.1.2",
    "angular-mat-datepicker": "0.0.2",
    "angular-webstorage-service": "^1.0.2",
    "bootstrap": "^4.1.3",
    "buffer": "^5.2.1",
    "core-js": "^2.5.4",
    "devextreme": "^18.1.4",
    "devextreme-angular": "^18.1.4",
    "events": "^3.0.0",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^3.0.1",
    "ngx-spinner": "^6.1.2",
    "ngx-toastr": "^9.0.2",
    "ngx-translate-cache": "^0.1.0",
    "node-sass": "^4.10.0",
    "rxjs": "^6.0.0",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.5",
    "@angular/cli": "^8.3.5",
    "@angular/compiler-cli": "^7.2.15",
    "ts-loader": "^4.0.1",
    "typescript": "^3.1.6"
  }
}

My "npm version"

{ 'retail-report-mobile': '0.0.0',
  npm: '6.11.3',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  modules: '64',
  napi: '4',
  nghttp2: '1.39.2',
  node: '10.16.3',
  openssl: '1.1.1c',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '6.8.275.32-node.54',
  zlib: '1.2.11' }

My "ng version"

Angular CLI: 8.3.5
Node: 10.16.3
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.5
@angular-devkit/build-angular      0.803.5
@angular-devkit/build-optimizer    0.803.5
@angular-devkit/build-webpack      0.803.5
@angular-devkit/core               7.3.9
@angular-devkit/schematics         7.3.9
@angular/cdk                       6.4.7
@angular/cli                       8.3.5
@angular/compiler-cli              7.2.15
@angular/material                  6.4.7
@angular/material-moment-adapter   7.3.7
@ngtools/webpack                   8.3.5
@schematics/angular                8.3.4
@schematics/update                 0.803.5
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

My error log

[error] Error: Cannot find module '@angular/compiler-cli/ngcc'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\***\Desktop\***\***\node_modules\@ngtools\webpack\src\ngcc_processor.js:10:16)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\***\Desktop\***\***\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:23:26)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)

Already sorry for any grammar mistakes and thank you for help.

johannesMatevosyan · Accepted Answer · 2020-03-17 10:49:05Z

5

I think your problem is with your versions. I mean you are using so many different versions and they could not work well together

let me explain:

Angular CLI: 8.3.5 (latest version)

but for cdk, for 1 year ago: "@angular/cdk": "^6.4.2", "@angular/common": "^6.1.0",

typescript: 3.5.3 ( which probably wasn't there when angular 6.4 exist)

try what I suggest: (I struggled so many times with old project)

Lucky shot: just run ng update --all=true --force=true (look at documentation for correct syntax) it might work, but even if it throw some exceptions, it provide guidelines which reference has a problem)
Create a new angular project by using "ng new projectname"

a. Use "ng serve" to start your project If it works fine, you will be sure that your npm and node works fine (which is very important because it eliminates so many bug possibilities) (if it isn't, honestly reinstalling windows is almost fastest way)

b. after having a working template, just start adding other references to be sure that you dont have version mismatch (and don't forget ng serve and watching the output result). If you had version mismatch, try to upgrade them, or if not possible remove them (if it's an old library, you have to replace it anyway)

c. If it works with any problems, then ship your old code to this new folder and to try to remove your bugs

edited Mar 17, 2020 at 10:49

johannesMatevosyan

2,3082 gold badges39 silver badges44 bronze badges

answered Sep 20, 2019 at 15:41

Amirreza

71311 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bkardo Over a year ago

I will try your suggestions and let you know about results as soon as I get my hands on the project. Thank you ^^

bkardo Over a year ago

I have tried first option.I am getting this error now "Unable to write a reference to DxiItemComponent in C:/Users/***/Desktop/abc111/abc/node_modules/devextreme-angular/ui/nested/item-dxi.js from C:/Users/***/Desktop/abc111/abc/node_modules/devextreme-angular/ui/accordion.js"

Amirreza Over a year ago

i havent seen this error, let's something, just delete (or rename) your node_modules folder \and retry

Utkarsh Mankad Over a year ago

The 'lucky shot' command worked. Along with inclusion of 'import @angular/localize/init;' in polyfills.ts file. That did the trick. Thanks !!!

StackOverflowUser Over a year ago

ng update --all=true --force=true definitely helped me get out of error after error trying to move the package.json on an old project towards Angular 8.

Fazal · Accepted Answer · 2020-07-24 21:15:36Z

1

I was facing the same NGCC error while build esm module. I have solved this by simply changing target in the compilerOptions of your tsconfig.json from es5 to es2015

answered Jul 24, 2020 at 21:15

Fazal

3,4441 gold badge17 silver badges20 bronze badges

Collectives™ on Stack Overflow

An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related