Sharing Top Content from the Angular-sphere.

Ahead-of-Time Compilation in Angular · Minko Gechev’s blog

Understanding Angular's Ahead-of-Time compilation ⏰🔥 🔧

  • In other words, by having a different implementation of the renderer we can use the same AoT compiled component and render it without any changes in the code.
  • The Angular template compiler receives as an input a component and a context (we can think of the context as a position in the component tree) and produces the following files: – – is a placeholder for the file’s name.
  • If we want to emit TypeScript as output of the AoT compilation process we must make sure we access only public fields in the templates of our components.
  • Since TypeScript has access modifiers, and enforces access only to public properties outside the inheritance chain, inside the internal component we cannot access any private properties part of the context object, so both: – – will throw a compile time error in the generated .
  • For this component, the Angular compiler will generate two classes: – – will be responsible for rendering the template of and also, performing change detection.

Articles about computer science, Angular, JavaScript, and compilers.

Recently I added Ahead-of-Time (AoT) compilation support to angular-seed and got a lot of questions about the new feature. In order to answer most of them, we will start from the beginning by explaining the following topics:

The short answer of this question is – We need compilation for achieving higher level of efficiency of our Angular applications. By efficiency I mostly mean performance improvements but also energy and sometimes bandwidth consumption.

AngularJS 1.x had quite a dynamic approach for both rendering and change detection. For instance, the AngularJS 1.x compiler is quite generic. It is supposed to work for any template by performing a set of dynamic computations. Although this works great in the general case, the JavaScript Virtual Machines (VM) struggles with optimizing the calculations on lower level because of their dynamic nature. Since the VM doesn’t know the shapes of the objects which provide context for the dirty-checking logic (i.e. the so called scope), it’s inline caches get a lot of misses which slows the execution down.

Angular, version 2 and above, took different approach. Instead of using the same logic for performing rendering and change detection for each individual component, the framework generates VM-friendly code at runtime or build time. This allows the JavaScript virtual machine to perform property access caching and execute the change detection/rendering logic much faster.

For instance, take a look at the…

Ahead-of-Time Compilation in Angular · Minko Gechev’s blog