Angular 13 >=13.0.3 ng serve throws UnhandledPromiseRejectionWarning: Error: NGCC failed.

[jsanta]

🐞 Bug report

Command (mark with an x)

• new
• build
• [ x] serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

It seems to be a regression as when we first updated our project to Angular 13, it didn't happen.
FIxed all @angular/* versions to 13.0.2 and stopped getting the error.
Tried it myself and with a couple of coworkers. Same problem.

Description

npm run ng serve 
[... some other logs ...]
[... exception on exception section]
[.. command stuck on '⠹ Generating browser application bundles (phase: setup)...' ]

🔬 Minimal Reproduction

NX monorepo once working with Angular 12 migrated to Angular 13, package.json installed version 13.0.1.
Recently had to delete the node_modules and npm install again. npm installed version 13.0.3

🔥 Exception or Error

(node:24753) UnhandledPromiseRejectionWarning: Error: NGCC failed.
    at NgccProcessor.process (/home/buru/Eze/queplancl/node_modules/@ngtools/webpack/src/ngcc_processor.js:146:19)
    at /home/buru/Eze/queplancl/node_modules/@ngtools/webpack/src/ivy/plugin.js:141:27
    at Hook.eval [as call] (eval at create (/home/buru/Eze/queplancl/node_modules/tapable/lib/HookCodeFactory.js:19:10), :24:1)
    at Hook.CALL_DELEGATE [as _call] (/home/buru/Eze/queplancl/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/buru/Eze/queplancl/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/buru/Eze/queplancl/node_modules/webpack/lib/Compiler.js:1099:29
    at eval (eval at create (/home/buru/Eze/queplancl/node_modules/tapable/lib/HookCodeFactory.js:33:10), :31:1)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:24753) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

🌍 Your Environment

› ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.0.3
Node: 14.17.4
Package Manager: npm 6.14.14
OS: darwin x64

Angular: 13.0.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.2
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             10.2.3
ng-packagr                      13.0.8
rxjs                            7.4.0
typescript                      4.4.4

[alan-agius4]

For some reasons spawning NGCC is exiting with a non zero error code but an error is not thrown.

[gkalpak]

@alan-agius4, is there a an easy way to get CLI to print the ngcc output?

[alan-agius4]

That’s the default behaviour https://github.com/angular/angular-cli/blob/033c4415efd6bb4a073018da446643c1abbe3a40/packages/ngtools/webpack/src/ngcc_processor.ts#L152

[gkalpak]

That is strange. So, does ngcc output nothing at all and it just fails? That would be unexpected.

@jsanta, I'm afraid there is not much we can do without more info. Could you share an (ideally minimal) reproduction?
Alternatively, you could try to find out exactly what command is being spawn by the CLI for your project, run it yourself with verbose logging (i.e. by appending --loglevel debug) and report the output here.

[gkalpak]

Hm...I wonder if this is the same as #44380 (the error messages and the stack traces match).
In the case of #44380, though, it did output another error message before the "NGCC failed" one.

[jsanta]

It appears to be the same error.
Will try as suggested.

[gkalpak]

Thx, @jsanta! You can also try using the build artifacts from my fix PR (see here for instructions) to see if the problem goes away.

[JoostK]

@jsanta Could you please try with 13.1.0?

[jsanta]

@JoostK sorry for my late reply.
It appears to be that the issue is solved with 13.1.0
Thank for all your help :)

[abdulrehmankhalid96]

@jsanta sorry for late reply
I had same issue with 13.1.1
ngcc was failing due to incompatible version of a npm package
Solution
navigate to NodeModule -> @angular -> compiler-cli -> bundles -> chunk-KWZNY2SK.js
now find the function extractFactoryCallsFromIfStatement(node)
In that function, paste the following code console.log(currentNode.thenStatement.getSourceFile()); before the following code
throw new Error("Then-statement inside UMD wrapper is not an expression statement:\n" + currentNode.thenStatement.getText());
so then you will have the information about the package in console that causing the issue, then update that package on the version which supports angular Ivy engine.

[ValentinTyanov]

@jsanta sorry for late reply I had same issue with 13.1.1 ngcc was failing due to incompatible version of a npm package Solution navigate to NodeModule -> @angular -> compiler-cli -> bundles -> chunk-KWZNY2SK.js now find the function extractFactoryCallsFromIfStatement(node) In that function, paste the following code console.log(currentNode.thenStatement.getSourceFile()); before the following code throw new Error("Then-statement inside UMD wrapper is not an expression statement:\n" + currentNode.thenStatement.getText()); so then you will have the information about the package in console that causing the issue, then update that package on the version which supports angular Ivy engine.

After hours of unsuccessful attempts to find out which dependency was causing the issue, this little trick helped me find out in 5 minutes. As a note to others struggling with this, the chunk file where the following code resides was named differently, so make sure you look through all of them.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}