Angular 12 RC 2 - Compilation is enormously slow and crashes on large build.

[ganySA]

🐞 Bug report

Command (mark with an x)

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

The build time for for angular 12 RC 2 is very slow - was also slow in RC0.
I have quite a big project with multiple lazy loaded modules. If i remove most of these and run its on a base set the compilation takes about 4-5minutes. When i include the lazy loaded modules it aborts after 5 minutes with a JavaScript heap memory.

With small code changes building/sealing takes 2-3 minutes.

[22280:00000215DB856250]  1371502 ms: Scavenge 2017.3 (2061.6) -> 2005.4 (2059.4) MB, 15.0 / 0.0 ms  (average mu = 0.373, current mu = 0.365) allocation failure
[22280:00000215DB856250]  1371545 ms: Scavenge 2020.7 (2061.9) -> 2008.2 (2059.4) MB, 13.9 / 0.0 ms  (average mu = 0.373, current mu = 0.365) allocation failure
[22280:00000215DB856250]  1371582 ms: Scavenge 2023.4 (2061.9) -> 2010.9 (2060.2) MB, 16.2 / 0.0 ms  (average mu = 0.373, current mu = 0.365) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00007FF6C293978D]
    1: StubFrame [pc: 00007FF6C29A56B5]
Security context: 0x011ffec408d1 <JSObject>
    2: LimitedMapView$blocklist0 [00000090B0991EF9] [C:\Development\R9-core\business-fed-r12\node_modules\sass\sass.dart.js:19422] [bytecode=000001A84E877181 offset=60](this=0x023f71f290a9 <Object map = 0000003DDD0B6219>,0x023c27a9bae9 <PrefixedMapView0 map = 00000237AEFEDC59>,0x03138c835f49 <UnmodifiableSetView map ...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6C1D251EF napi_wrap+114271
 2: 00007FF6C1CCFE66 v8::base::CPU::has_sse+66630
 3: 00007FF6C1CD0C66 v8::base::CPU::has_sse+70214
 4: 00007FF6C24E522E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF6C24CD301 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF6C239983C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF6C23A4A70 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF6C23A1594 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF6C2396D93 v8::internal::Heap::CollectGarbage+1283
10: 00007FF6C239D624 v8::internal::Heap::GlobalSizeOfObjects+212
11: 00007FF6C23D344B v8::internal::StackGuard::HandleInterrupts+907
12: 00007FF6C211E459 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+7737
13: 00007FF6C293978D v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 00007FF6C29A56B5 v8::internal::SetupIsolateDelegate::SetupHeap+988789
15: 00007FF6C28BE73C v8::internal::SetupIsolateDelegate::SetupHeap+42748
16: 000000F5DDB88F1E

[ganySA]

node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open

Allows it to run longer than 5 minutes. Sitting at over 20 minutes at (phase: building)

[alan-agius4]

Hi @ganySA,

Is there a way you can share the project even privately with the team? Or provide adding information such as cpu profile logs?. To generate a CPU profile you can use NG_BUILD_PROFILING env variable. Ex: NG_BUILD_PROFILING=1 ng build

Are you using JIT or AOT?

Thanks.

[ganySA]

@alan-agius4 i have shared the repo with you.

[alan-agius4]

Hi @ganySA,

Here are what I found;

• It appears that the project was manually updated and not using ng update. This caused several migrations that need to be run to amend you project not to be executed.

The left your project is a broken state were now "development' builds are using "production" settings and hence cause increase in memory usage and slow rebuild times.

You can run the migration by using the below command (Note, don't run the ng-update command multiple times as one of the migrations is non-idempotent)

ng update @angular/cli --migrate-only --from 11 --to 12

• From the CPU profile, I can also see that dart-sass is taking most of the time of the compilation, one of your files tailwind.scss contains 121836 lines with a size of 2.44mb. Realistically I don't think SASS can handle files this big and I am not surprised with the amount of memory needed.

[ganySA]

Hi Alan

Thank i will try the migrate command. Tailwind is a modern CSS framework that i believe angular CLI supports?
Referencing this issue #20015 where tailwind support is noted. I suspect that if the configuration is broken and it is running a full build then its trying to remove unused SCSS from tailwind hence for production CSS is minimised.

What is interesting is that this does not happen on v11 but this could as you point out be due to the build. I will do the upgrade and give it a go.

Thanks for taking the time to investigate.

[alan-agius4]

Hi Alan

Thank i will try the migrate command. Tailwind is a modern CSS framework that i believe angular CLI supports?
Referencing this issue #20015 where tailwind support is noted. I suspect that if the configuration is broken and it is running a full build then its trying to remove unused SCSS from tailwind hence for production CSS is minimised.

What is interesting is that this does not happen on v11 but this could as you point out be due to the build. I will do the upgrade and give it a go.

Thanks for taking the time to investigate.

In the reproduction tailwinds is not used, because there is no tailwind configuration in the root of the project. The CLI looks for tailwind.config.js in the project root with a fallback to the workspace root.

angular-cli/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

Lines 126 to 134 in f6135a2

	const tailwindConfigFile = 'tailwind.config.js';
	let tailwindConfigPath;
	for (const basePath of [wco.projectRoot, wco.root]) {
	const fullPath = path.join(basePath, tailwindConfigFile);
	if (fs.existsSync(fullPath)) {
	tailwindConfigPath = fullPath;
	break;
	}
	}

[ganySA]

I have these under /configs/ and for some reason this has worked - i was using a custom builder.
I have made all the changes as you recommended but these do not seem to work.
The issue for me right now is that if these errors do not occur in 11 but manifest in 12 i suspect there is something else taking place.
I have placed the tailwind configuration file i have into the base - it does not make a different. Tailwind processing should only take place with production flag. Is it possible that it does it regardless?

[alan-agius4]

I have placed the tailwind configuration file i have into the base - it does not make a different. Tailwind processing should only take place with production flag. Is it possible that it does it regardless?

I don't see any tailwind.config.js in the root of your project. Did you forget to push?

[ganySA]

I have reset my configuration to a simple configuration from a new angular 12 project and slowly added back settings.
I can further add that it seems a lot happier when i remove my styles folder from preprocessors
"stylePreprocessorOptions": {
"includePaths": [
"src/@calendar5/styles"
]
},

Even with a basic 'reset' configuration build takes about 4 minutes. I have not pushed will do so now.
I would say on 11 it takes about 1minute.

[ganySA]

Pushed updates.

[alan-agius4]

I did notice that due to import path src/@calendar5/styles the build is slower this appears to be related to @import '~@angular/material/theming'; in treo.scss.

This is above, is import is quite expensive and in your case it needs to be resolved around 65 times because you import this file that many times. Previously @angular/material/theming was a flattened into a single file not now it appears that something in version 12 changed is spit among a large number of files which indeed in this particular case is causing a significant performance degradation. //cc @jelbourn

Ps: I see don't see the tailwind.config.js configuration file.