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.

Solution 1

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)

1. 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)

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

Solution 2

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

Comments

[bkardo]

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

[bkardo]

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-angu‌​lar/ui/nested/item-d‌​xi.js from C:/Users/***/Desktop/abc111/abc/node_modules/devextreme-angu‌​lar/ui/accordion.js"

[Amirreza]

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

[Utkarsh Mankad]

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

[StackOverflowUser]

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.