Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Angular 9 has to pre-compile itself code?

I've just upgraded my project to Angular 9 and the first thing that I noticed is that the build time increased significantly in my CI (From 2 minutes to 4 minutes).

Analysing the logs, every time the tests or the build is performed, the CLI performs a pre-compilation. This is due to the new Ivy architecture, but from my understading, this compilation should only happen to code that isn't Ivy compatible.

So why I'm seeing lots of Compiling @angular/common : es2015 as esm2015 (Mostly from @angular packages) in my build ? Shouldn't Angular code itself be compatible with Ivy ?

Note: This also happens with a fresh project (Just with few libraries).

Update This happens with all commands that requires a build. Ex:

  • ng test --code-coverage=true --watch=false --browsers=ChromeHeadle
  • ng b -c=staging --aot

Update 2

I'm adding my builds for comparison: pre angular 9 and after angular 9 migration (The build still failing, but we can use the unit test as reference, from ~2 minutes to ~4 minutes of total execution)

like image 733
André Roggeri Campos Avatar asked Feb 11 '20 00:02

André Roggeri Campos


People also ask

Does Angular have its own compiler?

The Angular Compiler (which we call ngc ) is the tool used to compile Angular applications and libraries. ngc is built on the TypeScript compiler (called tsc ) and extends the process of compiling TypeScript code to add additional code generation related to Angular's capabilities.

Why do we need compilation process in Angular?

Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

What is $compile in Angular?

Overview. Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together. The compilation is a process of walking the DOM tree and matching DOM elements to directives.


1 Answers

This article helpfully explains why Angular 9 compiles dependencies with ngcc and the Ivy compilation road map.

In short, because Ivy instruction set will be stabilized in Angular 10 only, Angular team recommends not yet to publish packages compiled to Angular 9 Ivy. After Angular 10, package maintainers will be encouraged to publish Ivy packages; View Engine packages will still be supported, but not encouraged.

From this, I conclude some time after Angular 10 release, we will see significantly less ngcc compilation going on, in some cases none, depending on packages used by particular project. In Angular 9, ngcc compilation step is a necessary compromise you'll have hard time getting rid of.

As for CI speed, the official docs suggest ngcc can be executed explicitly. I think it might be possible to cache this step in CI, but not being aware of your particular setup, I can't suggest anything beyond research direction.

Update 1: Angular 9.1 promises ngcc build speed improvements.

Update 2: Angular 12 deprecates legacy compilation and View Engine rendering pipeline.

Update 3: Angular 13 has removed ViewEngine

like image 134
Klaster_1 Avatar answered Oct 04 '22 21:10

Klaster_1