What is AoT(or Ahead-of-Time Compilation) in Angular2?

Question

Ahead-of-Time Compilation(or AoT) is a feature that is provided in Angular2. But I could not find good explanation on official site about it.

Could somebody make a clear definition of it?

Answer 1

The template where we use angular2 peculiar syntaxes like ngFor or pipe or data binding stuffs need to be compiled to a vm friendly code, which the browser can read.

For just in time compilation (regular behaviour), the framework needs to ship the angular compiler and the template gets compiled on the browser when the app starts. This means higher bundle size angular has to ship, and longer load time, because the browser has to compile the template before it can render it.

This is analogous to how we have in browser transpilation of typescript. Because this is expensive process, we generally transpile typescript offline while bundling or build process.

Rendering template offline gives few benefits like

• Smaller bundle size: 60% of the angular2 library is the compiler. Now that the template is compiled ahead of time, we don't need to ship the compiler anymore. This reduces the bundle size the app needs to ship
• Faster load time: As the template is already compiled to VM friendly code, the browser takes no time in rendering the template. Results in faster page render.

Answer 2

Angular2 docs: https://angular.io/docs/ts/latest/guide/deployment.html#!#aot

The Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process.

Apps compiled with AOT launch faster for several reasons.

Application components execute immediately, without client-side compilation.
Templates are embedded as code within their components so there is no client-side request for template files.
You don't download the Angular compiler, which is pretty big on its own.
The compiler discards unused Angular directives that a tree-shaking tool can then exclude.