Angular 9 - NGCC fails with an unhandled exception

Question

Buidling the application after having upgraded dependcies to Angular 9 (and having performed necessary code changes) throws an error:

Compiling @angular/animations : es2015 as esm2015 Compiling @angular/animations : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Error: Error on worker #5: TypeError: Cannot read property 'fileName' of null

It then goes on to throw the below error:

Compiling @angular/core : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015
Error: Tried to write node_modules/@angular/core/core.d.ts.__ivy_ngcc_bak with an ngcc back up file but it already exists so not writing, nor backing up, node_modules/@angular/core/core.d.ts.

This error may be because two or more entry-points overlap and ngcc has been asked to process some files more than once.
You should check other entry-points in this package and set up a config to ignore any that you are not using.

Compiling @angular/core : es2015 as esm2015 An unhandled exception occurred: NGCC failed.

Answer 1

This problem (NGCC failed) was encountered by me and my colleague developer on our localhost machines.

It would be important to remark that the dev and prod machines were running well.

In order to solve this problem we've followed the next steps:

1. in tsconfig.json, in angularCompilerOptions have set ("enableIvy": false)
2. updated the nodeJS to the last version: (executing node -v returned v14.3.0)
3. have deleted the node_modules folder: (executing "rm .\node_modules\" [on windows], make sure it has been deleted successfully)
4. have installed the packages: (executing npm i )
5. here the project is ready to be built. It builds and runs without errors now.

I wish this helps you and other people in situations like this.

Answer 2

In my particular case the @angular-devkit/build-angular was updated to "^0.1001.2" in my package.json after running the npm audit fix. (This version seems to belong to angular 10, instead of the local projects' angular version (v9.1.7))

After reverting this change, everything started working again :

"@angular-devkit/build-angular": "~0.901.6"

Answer 3

Using terminal/cmd,

1st Step:

ng update @angular/cli @angular/core

2nd Step:

ng update

3rd Step:

ng serve

Fixed mine.

NOTE Your custom css files in bootstrap folder might get deleted. Back them up before and place them back after the update!

Answer 4

Try to remove the node_modules folder and run install again:

rm -rf node_modules

npm install

For me it has solved the problem.

Answer 5

This issue is becuase you might be running your app on any port and angular ngcc was assigned with a particular process id which was specified and locked in a file called __ngcc_lock_file__ inside \node_modules\@angular\compiler-cli\ngcc. If you are doing a hard system turn off or if your os crashed, this lock file will be there in the node_modules. And once you turn on you machine and trying to start the application again, angular cli will check this lock file and trying to find the process id specified in the file. Most of the time that process id will be missing since you did a complete machine restart and it will throw the this error.

Solution 1. remove node_modules and do npm install

Solution 2. Smart solution - delete the lock file as below.

Go to `\node_modules\@angular\compiler-cli\ngcc`

find the file named __ngcc_lock_file__ delete it. Done.

Happy hacking

Answer 6

Adding "postinstall": "ngcc" to "scripts" in package.json helped me to fix this

Answer 7

in my case, adding enableIvy: false didn't solve the issue, which was with the Angular Language Service Extension for vsCode (it looks like it's not actually taking the parameter into account).

The solution has been to downgrade the extension version. (v12.0.0 --> v11.2.14 see here to know how)

Answer 8

Setting "enableIvy": false in tsconfig.json does fix that particular error. Isn't Ivy supposed to be usable already?

This answer I found at enter link description here @clement911 answer and it worked for me after a lot of testing

Answer 9

Check your node.js version with node -v. And check if Angular 9 is compatible with it. Updating node.js to the latest LTS version (12.8.1) worked for me. I did this with nvm (node version manager). Found a good instruction here.

Answer 10

• I removed tslib.js from package.json
• Removed package-lock.json
• Deleted node_modules folder
• npm i
• ng serve

Worked for me

Answer 11

Well in my case I was trying to run an angular project of an older version with a newer version of node. I did this:

Removes all the existing nodule modules.

rm -rf node_modules

update node js to latest

npm update
npm install

updates the angular project version to the latest

ng update @angular/core

updates the project cli to the latest

ng update @angular/cli

Now start the project

ng-serve

Answer 12

in case version mismatch.. check first version node js and angular js

then write : npm install => : ng serve

if have port issue : ng server --port 4201

Answer 13

I had to go into my tsconfig.spec.json file and add

"angularCompilerOptions": {
    "enableIvy": false
}

It was already in my tsconfig.json file.

Answer 14

Kinda late on this party, but for older Angular versions, I managed to fix this thru VS extensions.

Angular CLI: 6.1.5 Node: 8.11.4

Visual studio, angular extension

Agnular view engine

Extensions -> Angular Language Service(v12.0.2) -> Extension Settings

• Under Workspace, put a check on "User Legacy View Engine language service".

Answer 15

I had a similar problem,

in my case updating NodeJS to new version helped.

Answer 16

I generally advise people to make a manual backup of the project after every succeded deployment (locally) because, when you face this kind of problem (everything related to NGCC errors) you can just hard delete node_modules folder and restore it from you last backup. and then build again.

Sometimes, when you cannot afford updating nodeJS to the last version, this solution would be perfect.

Answer 17

In my case I installed angular-font-awesome package from npm and then bootstrap, it might got conflicted, I just remove previously installed angular-font-awesome and then done ng build

Answer 18

I had this issue when I ran ionic build while the project built just fine with my colleagues. So we ran ng -v to compare our packages. Turns out I had higher versions of @angular-devkit/build-angular, @angular-devkit/build-optimizer and @angular-devkit/build-webpack , each of them was version 0.1001.2 - our project was running with 0.901.8.

So I ran npm uninstall @angular-devkit/build-angular 0.1001.2 to uninstall it, and npm install @angular-devkit/build-angular 0.901.8 to downgrade. On running ng -v again, the other 2 had downgraded as well.

Finally, ionic build was a success! We lived happily thereafter, till we run into different problems.Working packages for our project

Answer 19

I got this and other bugs because I tried to update some marginal libraries of Angular 9 application. The errors that subsequently appeared during compilation were senseless in the sense that they did not help to correct the error.

The solution by deleting "node_modules" and "npm i" does not work, because even though I have the original package.json, "npm i" still installs different versions of the libraries - not the original ones. What exactly were the libraries in node_modules originally is not known.

The only solution that helped is to restore the node_modules from backup.

Otherwise, if you need to update the libraries in the application, take a vacation and prepare some antidepressants, but it still may not help in a matter of days to solve meaningless errors after upgrading the libraries.

Answer 20

There is not situtation where disabling IVY is the best solution.

For windows users:

npm i rimraf -g
rimraf node_modules
npm i

Answer 21

"prettier": "2.2.1", remove this as it is interfare with symantics.

Answer 22

For me it turned out we had used the package-lock.json stated package versioning for a while, and when I tried to delete it due to merge conflicts and recreated it, the error happened. When going back to the old package-lock.json, the problem was gone. So I started searching:

• comparing changes between both
• checking if problem appears in production, too - then it almost can't be a dev dependency
• sorting out improbable and probable dependencies

I ended up at the Angular dependencies, more exactly at the @angular/material-moment-adapter having received an update (as we allow it in the package.json) from version 11.2.0 to 11.2.12.

Answer 23

Try to remove angular-font-awesome and run install again:

npm uninstall angular-font-awesome ng add @fortawesome/[email protected]

the problem is solved after i removed fontawesome and now Material Icons is my choice for icons. but i should to say thank you for Font Awesome for many years of free awesome icons :)

Answer 24

Replace tsconfig.json by below json content

{
  "compileOnSave": false,
  
  "compilerOptions": {
     "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}