Source:  Twitter logo

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.

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.

76 users liked answer #0dislike answer #076
Florin Filip profile pic
Florin Filip

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"

46 users liked answer #1dislike answer #146
Bas Que profile pic
Bas Que

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!

22 users liked answer #2dislike answer #222
Reza Taba profile pic
Reza Taba

Try to remove the node_modules folder and run install again:

rm -rf node_modules
npm install

For me it has solved the problem.

15 users liked answer #3dislike answer #315
Jacek Koziol profile pic
Jacek Koziol

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

13 users liked answer #4dislike answer #413
Jijo Cleetus profile pic
Jijo Cleetus

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

7 users liked answer #5dislike answer #57
Ekaterina Tokareva profile pic
Ekaterina Tokareva

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)

7 users liked answer #6dislike answer #67
Patrick M. profile pic
Patrick M.

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

4 users liked answer #7dislike answer #74
Meir profile pic
Meir

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.

3 users liked answer #8dislike answer #83
Menno Haans profile pic
Menno Haans
  • I removed tslib.js from package.json
  • Removed package-lock.json
  • Deleted node_modules folder
  • npm i
  • ng serve

Worked for me

3 users liked answer #9dislike answer #93
AbhijithKA profile pic
AbhijithKA

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
3 users liked answer #10dislike answer #103
Saideep Ullal profile pic
Saideep Ullal

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

1 users liked answer #11dislike answer #111
Hardik Solgama profile pic
Hardik Solgama

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

"angularCompilerOptions": {
    "enableIvy": false
}

It was already in my tsconfig.json file.

1 users liked answer #12dislike answer #121
Adrian Rosales profile pic
Adrian Rosales

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.

1 users liked answer #13dislike answer #131
bmi profile pic
bmi

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

For windows users:

npm i rimraf -g
rimraf node_modules
npm i
1 users liked answer #14dislike answer #141
Jonathan profile pic
Jonathan

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".
1 users liked answer #15dislike answer #151
Rey profile pic
Rey

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

npm uninstall angular-font-awesome ng add @fortawesome/angular-fontawesome@0.6.0

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

1 users liked answer #16dislike answer #161
fares Khazem profile pic
fares Khazem

I had a similar problem,

in my case updating NodeJS to new version helped.

0 users liked answer #17dislike answer #170
kyselm profile pic
kyselm

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.

0 users liked answer #18dislike answer #180
Haithem KAROUI profile pic
Haithem KAROUI

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

0 users liked answer #19dislike answer #190
Satish Patil profile pic
Satish Patil

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

0 users liked answer #20dislike answer #200
oleebranch profile pic
oleebranch

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

0 users liked answer #21dislike answer #210
samar profile pic
samar

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.

0 users liked answer #22dislike answer #220
seawave_23 profile pic
seawave_23

In my case, the problem was that my server did not have enough RAM (1 GB), which seems not enough to process a build. After increasing to 2 GB, the problem was solved.

Hope this could help anyone.

0 users liked answer #23dislike answer #230
Nenroz profile pic
Nenroz

For who are using vscode 1.62 or later. None of those answers helped me. I updated vscode yesterday (10/11/2021) and for some reason my Angular 9 project starts to show "NGCC failed". I downgraded vscode to 1.61.2 and everything came back to normal.

0 users liked answer #24dislike answer #240
Iago Coutinho Campos profile pic
Iago Coutinho Campos

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
  }
}
-3 users liked answer #25dislike answer #25-3
Sher Singh profile pic
Sher Singh

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).