Angular 12 @Use statement causing slow compilation.

[ganySA]

Please see the link angular/angular-cli#20713

The new theme API is really slow slow and problematic.

It seems related by the move to @use '~@angular/material'
statements. My compilation time with CLI has increased 5x, i am also experiencing node memory issues. Reverting back to 11 does not have this issue.

I have engaged with the CLI team but it seems this issue is material related.

[crisbeto]

We noticed something similar while we were testing out the migration, but the issues usually went away once we migrated all remaining imports of @angular/material/theming to @angular/material. Can you check if you have any remaining usages of @import '~@angular/material/theming' in your codebase that might not have been caught by the migration?

[jelbourn]

Chatting with the CLI team, it seems like the webpack Sass loader is (at least) a part of the problem here, since it doesn't do any caching of module resolution, causing it to re-resolve the same modules over and over. The CLI team is looking into improving Sass loading.

[alan-agius4]

Chatting with the CLI team, it seems like the webpack Sass loader is (at least) a big part of the problem here, since it doesn't do any cache of module resolution, causing it to re-resolve the same modules over and over. The CLI team is looking into fixing the loader.

Actually most of the resolutions (the relative once) happens inside dart-sass and therefore we cannot cache them. That said we are looking into improving the sass compilation times in general by using the sync version of dart-sass angular/angular-cli#20740

[jelbourn]

Got it, I likely misunderstood Keen yesterday.

I chatted with @crisbeto just now and he's going to look into also cutting down the number of module resolutions in general.

For anyone coming to this issue: we're hoping to land improvements in a patch release follow-up to 12.0.0.

[Splaktar]

Can you please provide the exact version of Angular Material and Angular CDK that

• is in use now
• was used to run the initial migration

12.0.0-rc.3 included a number of improvements to the Sass migration as mentioned in https://github.com/angular/components/blob/12.0.x/CHANGELOG.md#1200-rc3-resin-ensign-2021-05-11

Did you run https://sass-lang.com/documentation/cli/migrator on your project at all?

[ganySA]

Hi
I used version 12.0.0-rc.2 and ran ng g @angular/material:themingApi
I now use 12.0.0-rc.3.

I did not use the sass migrator at all.

[crisbeto]

That's where things could've been messed up. Between rc.2 and rc.3 we fixed several cases that the migration didn't catch and we moved it from ng generate to ng update. It might be worth trying again once v12 final comes out later today.

[jelbourn]

I chatted with the Sass team a bit today too, and they have sass/sass#2745 which tracks not caching stuff between compilations. They're going to starting investigating to see how much work it would be to add support for more caching.

[jelbourn]

@ganySA are you able to share a reproduction? It would be useful for someone on the Sass team to see a real-world scenario related to sass/sass#2745