Angular 12.1.0 big rebuild time

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

It was much faster for rebuilds with ng11.1.2 + NG_BUILD_IVY_LEGACY=1 (see the table below).

Description

Rebuild time for AppComponent changes (adding console.logs) increase drastically with the amount of code.

We have relatively big application. Here are some measures for starting server and rebuilding on changes in AppComponent for different cases.

	server	AppComponent
default	180s	65s
default, --aot=false	105s	3.5s
12 of 24 lazy routes disabled	125s	45s
18 of 24 lazy routes disabled	100s	8.5s
all lazy routes disabled	52s	2.2s
ng11 default	350s	14s

(ng11 - 11.1.2 version with NG_BUILD_IVY_LEGACY=1)
(all changes are adding console.log() statements to AppComponent, median of 3-4 passes excluding first on)

🔬 Minimal Reproduction

Don’t have a public reproduction. Attaching rebuild performance profiling for 18 of 24 lazy routes disabled case.

CPU-20210707T141946.cpuprofile https://drive.google.com/file/d/1LQzweIGTErNLmjcLhDjnGOSWiVbol-gR/view?usp=sharing

Cant profile the default case with all routes enabled - chrome crashes trying to dump all this stuff 😦

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 12.1.0
Node: 12.18.1
Package Manager: yarn 2.4.2
OS: win32 x64

Angular: 12.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router
... youtube-player

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@angular/flex-layout            12.0.0-beta.34
@ngtools/webpack                12.1.0
@nguniversal/builders           12.1.0
@nguniversal/express-engine     10.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.4
webpack                         5.40.0

Anything else relevant?

This issue affects several of our projects relatively same size. Most of our code is inside libs/ subfolders and is imported directly by sources (nrwl/nx like monorepo).

Can debug something else, share screen or provide TeamViewer access to our codebase to check anything (discord drow#4335)

[vugar005]

Maybe this blog by @brandonroberts can be helpful. https://dev.to/brandontroberts/speeding-up-the-development-serve-after-upgrading-to-angular-v12-5db5

[JoostK]

I think I have an idea for where the remaining time comes from. The template type checker may need to add type-checking code to user code, if the same effect cannot be achieved from within the type-check file (e.g. when a directive has an internal generic type, it cannot generate the type constructor external to the directive). If this adds imports to the file, the program structure cannot be reused and also incremental type-checking is not as effective, as imports affect the computed shape. This incurs significant costs on program creation and type-checking time.