"Sealing" phase is stuck on

[alexandis]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.2.0

Description

Generating browser applicaiton bundles (phase: sealing) - never ends.

Minimal Reproduction

I've upgraded my solution from Angular 13.2.0 to 15.0.1...
I've successfully build all the projects both in Production and Development configurations. But I cannot get through "sealing" phase. I don't understand whose exactly this problem is and how to debug what is it stuck on?

Exception or Error

No response

Your Environment

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.0.5
@angular-devkit/schematics      15.0.5
@schematics/angular             15.2.0
ng-packagr                      15.2.2
rxjs                            7.8.0
typescript                      4.8.4

Anything else relevant?

No response

[alan-agius4]

You could generate a CPU profile.

See: https://github.com/angular/angular-cli/blob/main/docs/DEVELOPER.md#cpu-profiling

[alexandis]

UPDATE: after about 1.5 hour (!) of just stucking, it finally gave me the error:

[alexandis]

Moving on. It does not look like CPU is working at all during "sealing":

[alexandis]

I've tried to debug "ng serve" and here's what is happening while "stuck" on "sealing" phase. I pressed "Pause" in debugger and there are numerous parsing errors inside this method which seem to silently "swallowed":

1. If it it something of this sort - i.e. I need to include all such CSS into angular.json "styles" or "assets" section - i've tried it, but still getting the same error; 2) I suppose the sealing phase shouldn't stuck for 1.5 hour and the error message should be given to a user immediately. Or am I missing something?

Everything worked "as is" before upgrade.

[alan-agius4]

@alexandis, would please provide one of these error message in a gist?

[alexandis]

@alexandis, would please provide one of these error message in a gist?
Sure. Gist. Here are also configurations which might come handy.

[alan-agius4]

Thanks @alexandis, I did manage to get to the bottom of why the build is getting stuck and I have a PR to fix it. For the time being as a workaround you can run build/serve with the --verbose command line argument.

Now, to the error itself, I don't know what's the root problem as I don't have context of how this stylesheet is being used in the application. How is this CSS being used? Are you importing the CSS file in your JS? In that case, you are problem encountered one of the breaking changes in version 14.

We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI. This feature was never truly supported by the Angular CLI, but has as such for visibility.

See https://github.com/angular/angular-cli/releases/tag/14.0.0 for the full list of breaking changes in v14.

---

By the way, well done into getting to the bottom of why the build is stuck.

[alexandis]

@alan-agius4 thank you too for quick response. As to the css issue itself, please give me some more time. Now we are trying to recompile and merge the project having this css (seems like it is supposed to be not a simple npm update, but a real merge), it is a UI theme project based on a 3rd party project and there were a lot of changes while upgrading from Angular 13 to Angular 15 made by the 3rd party team. Besides, this project itself consumes another project, based on Angular 13 - that one cannot be changed. Once we will get a merged version, I will try another build and let's see...

[alexandis]

Bot closed this bug very soon... :)

Now, to the error itself, I don't know what's the root problem as I don't have context of how this stylesheet is being used in the application. How is this CSS being used? Are you importing the CSS file in your JS? In that case, you are problem encountered one of the breaking changes in version 14.

I found out the initial reason of the error (there were css-importing scripts in "Dist" folder - next to CSS files, I removed them). But I still cannot figure out what is happenind next preventing the successful compilation. Could you please give me a hint how to fix this? I'm not into CSS at all, I just had to make it running fixing Angular bugs. Note: the referencing library (ours) is based on Angular 15. The library which contains the .css on the screenshot is a 3rd party library and is based on Angular 13.

[alan-agius4]

That is expected and is due to MDC changes in material version 15. Angular material 13 mixins are not compatible with version 15.

See: https://material.angular.io/guide/mdc-migration

[alexandis]

Thank you very much for the assitance!

[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.}