angular-cli: Slower compilation when using @ngtools/webpack@7.1.0

The issue is indeed that within 7.1.x the Angular compiler is always used to calculate the set of lazy routes when in JIT mode. This was initially done to guarantee that the lazy routes were calculated accurately and any lazy route related errors would be shown upon a rebuild. This has the unfortunate downside of taking more time. The underlying problem is one of correctness/accuracy versus speed.

The team has decided to bring back the faster but potentially less accurate method of detecting lazy routes upon JIT rebuilds (first builds will always use the more complete Angular compiler method). Applications that do not have lazy routes within libraries and that only use direct string literals with loadChildren should not be affected by the potential of less accurate detection. Note that the function overload of loadChildren also does not apply to this situation. For those projects where correctness of lazy route detection outweighs rebuild speed, please consider using AOT mode for development. AOT mode will also provide a full set of template errors as well which JIT mode is not capable of doing.

If you have concerns about this decision, please let us know.

@psurrey It already has been. Ensure that the project is using both @angular/cli@7.2.1 and @angular-devkit/build-angular@0.12.1.

@why520crazy, I’ll be working on this today.

Was working a bit on this today and noticed that the results I took yesterday were of rebuilds without a vendor chunk, which great inflate total rebuild times.

To get more granular information I also used an internal profiling flag we have to see where time is spent in compilations.

The results I got were:

• @ngtools/webpack@7.0.7 rebuilds took ~0.5s

i ｢wdm｣: Compiling...
TypeChecker._update: 0.173ms
AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram: 8.969ms
AngularCompilerPlugin._findLazyRoutesInAst: 0.563ms
TypeChecker._createOrUpdateProgram.ts.createProgram: 14.826ms
TypeChecker.gatherDiagnostics.ts.getSyntacticDiagnostics: 0.269ms
AngularCompilerPlugin._emit.ts+D:/work/angular/aio/src/main.ts+.emit: 12.643ms
AngularCompilerPlugin._emit: 13.173ms
AngularCompilerPlugin._update._emit: 13.638ms
AngularCompilerPlugin._update: 43.407ms
AngularCompilerPlugin._make: 43.848ms
ngcLoader+D:\work\angular\aio\src\main.ts+.ngcLoader.AngularCompilerPlugin: 17.118ms
ngcLoader+D:\work\angular\aio\src\main.ts+: 20.312ms
TypeChecker.gatherDiagnostics.ts.getSemanticDiagnostics: 264.195ms
TypeChecker.message: 281.368ms

Date: 2018-12-13T11:45:50.889Z - Hash: 16ad75ffacc918bb20c2 - Time: 511ms
22 unchanged chunks
chunk {main} main.229bfd5f540aafd21011.js, main.229bfd5f540aafd21011.js.map (main) 201 kB [initial] [rendered]

• @ngtools/webpack@7.1.0 rebuilds took ~3.3s

i ｢wdm｣: Compiling...
TypeChecker._update: 0.151ms
TypeChecker._createOrUpdateProgram.ts.createProgram: 10.518ms
TypeChecker.gatherDiagnostics.ts.getSemanticDiagnostics: 327.532ms
TypeChecker.message: 339.517ms
AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram: 1592.257ms
AngularCompilerPlugin._emit.ts.gatherDiagnostics.ts.getSyntacticDiagnostics: 0.573ms
AngularCompilerPlugin._emit.ts+D:/work/angular/aio/src/main.ts+.emit: 197.366ms
AngularCompilerPlugin._emit: 200.312ms
AngularCompilerPlugin._update._emit: 200.506ms
AngularCompilerPlugin._update: 2803.878ms
AngularCompilerPlugin._make: 2804.271ms
ngcLoader+D:\work\angular\aio\src\main.ts+.ngcLoader.AngularCompilerPlugin: 1192.022ms
ngcLoader+D:\work\angular\aio\src\main.ts+: 1194.172ms

Date: 2018-12-13T11:50:28.263Z - Hash: 770163b2af42fff274b6 - Time: 3566ms
22 unchanged chunks
chunk {main} main.4eecb9fa84b0b62a9195.js, main.4eecb9fa84b0b62a9195.js.map (main) 201 kB [initial] [rendered]

• @ngtools/webpack@7.1.2 rebuilds took ~1.1s (includes #13133)

i ｢wdm｣: Compiling...
TypeChecker._update: 0.154ms
AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram: 4.893ms
TypeChecker._createOrUpdateProgram.ts.createProgram: 10.950ms
TypeChecker.gatherDiagnostics.ts.getSemanticDiagnostics: 258.325ms
TypeChecker.message: 270.538ms
AngularCompilerPlugin._emit.ts.gatherDiagnostics.ts.getSyntacticDiagnostics: 0.317ms
AngularCompilerPlugin._emit.ts+D:/work/angular/aio/src/main.ts+.emit: 10.914ms
AngularCompilerPlugin._emit: 11.688ms
AngularCompilerPlugin._update._emit: 12.224ms
AngularCompilerPlugin._update: 616.467ms
AngularCompilerPlugin._make: 616.803ms
ngcLoader+D:\work\angular\aio\src\main.ts+.ngcLoader.AngularCompilerPlugin: 596.443ms
ngcLoader+D:\work\angular\aio\src\main.ts+: 598.446ms

Date: 2018-12-13T11:55:02.640Z - Hash: 9fbd23000feec6a6452b - Time: 1141ms
22 unchanged chunks
chunk {main} main.5c50f6c3037acf65f46c.js, main.5c50f6c3037acf65f46c.js.map (main) 201 kB [initial] [rendered]

• @ngtools/webpack@7.1.3 rebuilds took ~1.2s (includes extra logging from #13159)

i ｢wdm｣: Compiling...
TypeChecker._update: 0.151ms
AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram: 5.154ms
AngularCompilerPlugin._listLazyRoutesFromProgram.createProgram: 0.065ms
TypeChecker._createOrUpdateProgram.ts.createProgram: 16.334ms
TypeChecker.gatherDiagnostics.ts.getSemanticDiagnostics: 283.161ms
TypeChecker.message: 300.672ms
AngularCompilerPlugin._listLazyRoutesFromProgram.listLazyRoutes: 630.713ms
AngularCompilerPlugin._emit.ts.gatherDiagnostics.ts.getSyntacticDiagnostics: 0.338ms
AngularCompilerPlugin._emit.ts+D:/work/angular/aio/src/main.ts+.emit: 13.726ms
AngularCompilerPlugin._emit: 14.763ms
AngularCompilerPlugin._update._emit: 15.229ms
AngularCompilerPlugin._update: 669.832ms
AngularCompilerPlugin._make: 670.866ms
ngcLoader+D:\work\angular\aio\src\main.ts+.ngcLoader.AngularCompilerPlugin: 650.003ms
ngcLoader+D:\work\angular\aio\src\main.ts+: 652.326ms

Date: 2018-12-13T12:14:41.442Z - Hash: 646a2507d4b49c72b08d - Time: 1186ms
22 unchanged chunks
chunk {main} main.68f05d7dcc3f58fc730b.js, main.68f05d7dcc3f58fc730b.js.map (main) 201 kB [initial] [rendered]

A few notes about these profiling messages:

• AngularCompilerPlugin._make is the total time taken inside the ngtools/webpack plugin
• TypeChecker.* refers to the forked type checker, in a separate process
• Time spent in ngtools/webpack is only part of the story, as webpack also needs to recreate bundles and sourcemaps

My previous guess was that syntactic diagnostics on rebuilds were still taking too long, but that doesn’t really hold true since in @ngtools/webpack@7.1.2 they are shown to take less that 1ms (AngularCompilerPlugin._emit.ts.gatherDiagnostics.ts.getSyntacticDiagnostics: 0.317ms).

What does seem to take a lot longer is AngularCompilerPlugin._update, clocking in at 43.407ms in 7.0.7 but increasing to 616.467ms in 7.1.2. The main contributor is AngularCompilerPlugin._listLazyRoutesFromProgram.listLazyRoutes, only visible in the profile logs for 7.1.3.

That increase seems related to https://github.com/angular/angular-cli/pull/12418, where the way we process lazy routes and their errors changed.

‘npm i @ngtools/webpack@7.0‘

I guess https://github.com/angular/angular-cli/pull/12824 caused this? I’m not sure if this is the intended behavior. An opt-out would be nice.