Angular 9 - NGCC fails with an unhandled exception

Question

Building the application after having upgraded dependencies to Angular 9 (and having performed the 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 configuration to ignore any that you are not using.

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

score 101 · Answer 1 · edited Aug 20 '22 at 16:30

101

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

It would be important to remark that the development and production machines were running well.

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

in file tsconfig.json, in angularCompilerOptions have set ("enableIvy": false)
updated Node.js to the latest version (executing node -v returned v14.3.0)
have deleted the node_modules folder folder 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.

edited Aug 20 '22 at 16:30

Peter Mortensen

30,738
21
105
131

answered May 26 '20 at 11:25

Florin Filip

1,224
1
7
6

16

Re-installing node_modules did it for me – Ollie Jun 14 '20 at 08:40
26

setting the `"enableIvy":false` did the trick for me – Musikero31 Jun 20 '20 at 15:52
I had the problem after adding a new npm module to ng9 app. deleting node_modules worked! – Guntram Jul 24 '20 at 12:33
24

How could setting `enableIvy` to false be a solution when it would result in a much bigger bundle after the project is built? – Muhammad bin Yusrat Sep 12 '20 at 07:18
"enableIvy":false did the trick Previously i didnt had this error, until used a custom webpack builder. – Vladyslav Didenko Dec 23 '20 at 12:44
Downgrade @angular-devkit/build-angular works for me. "@angular-devkit/build-angular": "^0.901.6" – Uditha Prasad Jan 28 '21 at 10:06
1

I was able to get this fixed without having to setting ivy to false. – Nechar Joshi Mar 23 '22 at 09:23

score 52 · Answer 2 · edited Aug 31 '22 at 22:17

52

In my particular case, the @angular-devkit/build-angular was updated to "^0.1001.2" in my package.json file 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"

edited Aug 31 '22 at 22:17

Peter Mortensen

30,738
21
105
131

answered Sep 22 '20 at 12:27

Bas Que

671
6
5

2

I had exactly the same issue. – Michi-2142 Oct 08 '20 at 13:02
Great soultion. No need to use "enableIvy": false – Davide Nov 16 '20 at 11:57
I also had the exact same problem. This solved it. Thanks – Lukas R. Nov 23 '20 at 14:30
I set "@angular-devkit/build-angular": "~0.901.6" and install npm again. now working correctly. thanks – Albaz Jan 11 '21 at 10:15
Downgrade @angular-devkit/build-angular works for me. "@angular-devkit/build-angular": "^0.901.6" – Uditha Prasad Jan 28 '21 at 09:59

Reza Taba · Answer 3 · 2023-05-21T10:05:31.610

26

Using terminal/cmd,

First step:

ng update @angular/cli @angular/core

Second step:

ng update

Third step:

ng serve

It fixed mine.

Note

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

Global Solution

With solution above you need to do the "First step" on each project. In case you wanted to upgrade your Angular CLI/Core versions globally for all feature projects, upgrade your Angular version with this command:

npm i -g @angular/cli

Then run the Second and Third steps above.

edited May 21 '23 at 10:05

answered Sep 04 '20 at 13:39

Reza Taba

1,151
11
15

1

Worked for me. Saved my time, Thanks – Phani Kumar Nov 25 '20 at 07:36
11

why would the right answer be to change ng versions? That decision should not be made lightly. – Omar Apr 16 '21 at 15:02
Well, weirdly enough, upgrading angular to the latest stable release fixed the extension giving that error. Thanks. In my case, upgrading the major angular release from 11 to 12 wasn't an issue. – Paul-Sebastian Manole Jun 07 '21 at 15:03

score 21 · Answer 4 · edited Aug 31 '22 at 22:12

This issue is because you might be running your application 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 folder folder. And once you turn on you machine and are trying to start the application again, Angular CLI will check this lock file and try 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 this error.

Solution 1. Remove folder 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__, and delete it. Done.

score 17 · Answer 5 · edited Aug 20 '22 at 16:42

17

Try to remove the node_modules folder and run install again:

rm -rf node_modules

npm install

For me it has solved the problem.

edited Aug 20 '22 at 16:42

Peter Mortensen

30,738
21
105
131

answered Jul 10 '20 at 09:32

Jacek Koziol

303
1
3
8

2

You do not have to remove the whole `node_modules`, `node_modules/@angular` folder is enough. But, anyway, do not forget to `npm i`. – Eugene P. May 06 '21 at 11:46

score 10 · Answer 6 · answered Jul 12 '20 at 11:59

10

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

answered Jul 12 '20 at 11:59

Ekaterina Tokareva

813
11
11

5

Works for me, best solution IMO. – Verri Dec 09 '20 at 13:15

score 8 · Answer 7 · edited Aug 31 '22 at 22:42

8

In my case, adding enableIvy: false didn't solve the issue, which was with the Angular Language Service Extension for Visual Studio Code (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).

edited Aug 31 '22 at 22:42

Peter Mortensen

30,738
21
105
131

answered May 17 '21 at 09:45

Patrick M.

750
3
10
21

I am currently stuck with Node JS 12 and this is the only solution that worked for me. Also, it has the advantage of not disabling Ivy. Thanks. – Alexei - check Codidact Nov 03 '21 at 11:13

score 5 · Answer 8 · edited Aug 20 '22 at 16:25

5

Setting "enableIvy": false in file tsconfig.json does fix that particular error. Ivy is supposed to be usable already.

I found this in clement911's answer to Error after updated to version 9 #36060, and it worked for me after a lot of testing.

edited Aug 20 '22 at 16:25

Peter Mortensen

30,738
21
105
131

answered Apr 30 '20 at 08:38

Meir

994
12
25

score 4 · Answer 9 · answered Sep 23 '20 at 23:37

4

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

"angularCompilerOptions": {
    "enableIvy": false
}

It was already in my tsconfig.json file.

answered Sep 23 '20 at 23:37

Adrian Rosales

53
7

score 3 · Answer 10 · edited Aug 20 '22 at 16:36

3

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). I found good instructions here.

edited Aug 20 '22 at 16:36

Peter Mortensen

30,738
21
105
131

answered Jun 24 '20 at 07:11

Menno Haans

31
2

score 3 · Answer 11 · edited Aug 20 '22 at 16:43

3

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

It worked for me.

edited Aug 20 '22 at 16:43

Peter Mortensen

30,738
21
105
131

answered Jul 20 '20 at 15:52

AbhijithKA

76
4

thanks @abhi. Worked for me but created package-lock.json file again. – Anant Dhas Mar 20 '21 at 14:22
That's what happens when you run npm i – Ben Taliadoros Mar 26 '21 at 12:31
@Ben Taliadoros: Point being? – Peter Mortensen Oct 07 '22 at 13:11
That when you run that command the package-lock.json is created and it's intentional. It didn't seem that Anant was expecting that – Ben Taliadoros Oct 10 '22 at 15:47

score 3 · Answer 12 · edited Aug 31 '22 at 22:22

3

Well, in my case I was trying to run an Angular project of an older version with a newer version of Node.js. I did this:

Removed all the existing nodule modules.

rm -rf node_modules

Updated Node.js to the latest:

npm update
npm install

Updated the Angular project version to the latest

ng update @angular/core

Updated the project cli to the latest

ng update @angular/cli

Now start the project

ng-serve

edited Aug 31 '22 at 22:22

Peter Mortensen

30,738
21
105
131

answered Oct 30 '20 at 17:22

Saideep Ullal

221
3
16

I would be VERY HESITENT to delete `node_modules`, at least rename it to a bkup until you figure out that you solved everything. `mv node_modules ~/node_modules.bkup` – A Kareem Oct 10 '21 at 13:21

score 2 · Answer 13 · edited Aug 31 '22 at 22:49

2

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 say thank you for Font Awesome for many years of free awesome icons :)

edited Aug 31 '22 at 22:49

Peter Mortensen

30,738
21
105
131

answered Jun 15 '21 at 12:08

fares Khazem

21
4

Hardik Solgama · Answer 14 · 2023-02-09T06:32:56.867

1

in that 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

edited Feb 09 '23 at 06:32

answered Sep 22 '20 at 11:28

Hardik Solgama

13
3

score 1 · Answer 15 · edited Aug 31 '22 at 22:28

I got this and other bugs because I tried to update some marginal libraries of an 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 file, "npm i" still installs different versions of the libraries—not the original ones. What exactly were the libraries in folder node_modules folder originally is not known.

The only solution that helped was to restore the node_modules folder 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.

score 1 · Answer 16 · edited Aug 31 '22 at 22:56

1

There is not a situation where disabling Ivy is the best solution.

For Windows users:

npm i rimraf -g
rimraf node_modules
npm i

edited Aug 31 '22 at 22:56

Peter Mortensen

30,738
21
105
131

answered Mar 16 '21 at 13:41

Jonathan

3,893
5
46
77

score 1 · Answer 17 · edited Aug 31 '22 at 22:45

1

For older Angular versions, I managed to fix this through Visual Studio extensions.

Angular CLI: 6.1.5
Node: 8.11.4

Visual Studio, Angular extension

Angular view engine

Extensions → Angular Language Service(v12.0.2) → Extension Settings

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

edited Aug 31 '22 at 22:45

Peter Mortensen

30,738
21
105
131

answered May 27 '21 at 11:33

Rey

51
3

Re *"Visual Studio"*: Don't you mean *"[Visual Studio Code](https://en.wikipedia.org/wiki/Visual_Studio_Code)"*? They are two different things. – Peter Mortensen Aug 31 '22 at 22:47

score 1 · Answer 18 · answered Apr 04 '23 at 06:04

I've had this issue and none of the above answers helped.

My solution:

navigate to root ng project folder
run cmd command: ./node_modules/.bin/ngc tsconfig.json
this exposed a real error: one of the component *.spec.ts files (test files) had an error (I removed a dependency earlier). This wasn't surfaced by default when building or trying VS Code debugging.
After fixing the error, both VS Code debugger and ./node_modules/.bin/ngc tsconfig.json command succeeded

score 0 · Answer 19 · edited Aug 20 '22 at 16:26

0

I had a similar problem.

In my case, updating Node.js to a new version helped.

edited Aug 20 '22 at 16:26

Peter Mortensen

30,738
21
105
131

answered May 26 '20 at 07:28

kyselm

300
3
11

score 0 · Answer 20 · edited Aug 20 '22 at 16:40

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

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

score 0 · Answer 21 · edited Aug 31 '22 at 22:19

0

In my case, I installed the angular-font-awesome package from npm and then Bootstrap. It might got conflicted, but I just removed the previously installed angular-font-awesome and then did a ng build.

edited Aug 31 '22 at 22:19

Peter Mortensen

30,738
21
105
131

answered Sep 28 '20 at 18:53

Satish Patil

438
5
15

score 0 · Answer 22 · edited Aug 31 '22 at 22:20

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. It 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, and 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 two 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

score 0 · Answer 23 · edited Aug 31 '22 at 22:38

0

"prettier": "2.2.1". Remove this, as it is interferes with semantics.

edited Aug 31 '22 at 22:38

Peter Mortensen

30,738
21
105
131

answered Apr 30 '21 at 04:56

samar

1
1

1

That is a bit terse. Can you elaborate, please? E.g., remove from what? What do you mean by *"interferes with semantics"*? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/67328394/edit), not here in comments (********************** ***without*** ************ "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Aug 31 '22 at 22:39

score 0 · Answer 24 · answered May 19 '21 at 17:34

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.

score 0 · Answer 25 · edited Aug 31 '22 at 22:51

0

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

edited Aug 31 '22 at 22:51

Peter Mortensen

30,738
21
105
131

answered Nov 04 '21 at 19:27

zronn

1,026
8
26

score 0 · Answer 26 · edited Aug 31 '22 at 22:53

0

For those who are using Visual Studio Code 1.62 or later. None of those answers helped me.

I updated Visual Studio Code yesterday (2021-10-11) and for some reason my Angular 9 project started to show "NGCC failed". I downgraded Visual Studio Code to 1.61.2 and everything came back to normal.

edited Aug 31 '22 at 22:53

Peter Mortensen

30,738
21
105
131

answered Nov 11 '21 at 17:30

Iago Coutinho Campos

143
7

score 0 · Answer 27 · edited Oct 07 '22 at 13:13

0

Unfortunately, none of the previous answers worked.

Downgrading typescript (4.8 to 4.6 in my case) resolved the issue.

edited Oct 07 '22 at 13:13

Peter Mortensen

30,738
21
105
131

answered Sep 20 '22 at 10:08

Vishal Sharma

11
4

*How* did you downgrade? Please respond by editing your answer (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Oct 07 '22 at 13:14

score -2 · Answer 28 · answered Dec 22 '22 at 08:46

-2

This only woked for me del node_modules npm install enableIvy:false was not support who uses angular v12 or above

answered Dec 22 '22 at 08:46

Shankar

17
6

score -6 · Answer 29 · edited Aug 31 '22 at 22:23

-6

Replace file tsconfig.json by the 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
  }
}

edited Aug 31 '22 at 22:23

Peter Mortensen

30,738
21
105
131

answered Jan 05 '21 at 15:23

Sher Singh

497
5
8

3

Care to explain? – Captain Kenpachi Jan 21 '21 at 08:47
surely "target": "es2015" is enable proper compilation – Deunz Jul 07 '21 at 13:44
2

Hi! The reason this answer is getting downvoted by your peers, is it simply isn't helpful enough. What are the parts that help to address the unhandled exception that the OP is asking about? Explaining the reasoning behind your answer is a key part of giving a good answer. – Andrew Gray Sep 15 '21 at 15:13

Angular 9 - NGCC fails with an unhandled exception

29 Answers29

Linked