Angular 9 - NGCC fails with an unhandled exception
AngularTypescriptIvyAngular CompilerAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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:
- in tsconfig.json, in angularCompilerOptions have set ("enableIvy": false)
- updated the nodeJS to the last version: (executing node -v returned v14.3.0)
- have deleted the node_modules folder: (executing "rm .\node_modules" [on windows], make sure it has been deleted successfully)
- have installed the packages: (executing npm i )
- 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.
Solution 2 - Angular
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"
Solution 3 - Angular
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!
Solution 4 - Angular
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
Solution 5 - Angular
Try to remove the node_modules
folder and run install again:
rm -rf node_modules
npm install
For me it has solved the problem.
Solution 6 - Angular
Adding "postinstall": "ngcc"
to "scripts"
in package.json helped me to fix this
Solution 7 - Angular
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)
Solution 8 - Angular
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
Solution 9 - Angular
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.
Solution 10 - Angular
- I removed tslib.js from package.json
- Removed package-lock.json
- Deleted node_modules folder
npm i
ng serve
Worked for me
Solution 11 - Angular
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
Solution 12 - Angular
I had to go into my tsconfig.spec.json file and add
"angularCompilerOptions": {
"enableIvy": false
}
It was already in my tsconfig.json file.
Solution 13 - Angular
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 :)
Solution 14 - Angular
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
Solution 15 - Angular
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.
Solution 16 - Angular
There is not situtation where disabling IVY is the best solution.
For windows users:
npm i rimraf -g
rimraf node_modules
npm i
Solution 17 - Angular
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
Extensions -> Angular Language Service(v12.0.2) -> Extension Settings
- Under Workspace, put a check on "User Legacy View Engine language service".
Solution 18 - Angular
I had a similar problem,
in my case updating NodeJS to new version helped.
Solution 19 - Angular
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.
Solution 20 - Angular
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
Solution 21 - Angular
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
Solution 22 - Angular
"prettier": "2.2.1", remove this as it is interfare with symantics.
Solution 23 - Angular
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.
Solution 24 - Angular
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.
Solution 25 - Angular
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.
Solution 26 - Angular
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
}
}