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?

Possible dup of http://stackoverflow.com/questions/39464319/how-does-angular2-ahead-of-time-aot-compilation-work — yurzui, Sep 14 '16 at 10:36
thanks for the link, I'd already reviewed it, but still looking for kind of exact definition — Stepan Suvorov, Sep 14 '16 at 10:38

Gaurav Mukherjee · Answer 1 · 2016-09-14T11:15:51.803

8

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.

edited Sep 14 '16 at 11:15

answered Sep 14 '16 at 11:05

Gaurav Mukherjee

6,205
2
23
33

AOT is just the fact to transform html templates into functions. So bascially, your app should be faster (no need to compile teplates on the fly at bootstrap). So I agree to **Faster load time**. But for the **Smaller bundle size** it won't happen because of AOT. You'll need to use something like rollup in order to tree shake your code (and reduce bundle size). This is early stage tho. – maxime1992 Nov 14 '16 at 13:03
apart from tree shaking, smaller bundle size is also possible with AOT because angular compiler, which is major part of angular2, is not included in the bundle – Gaurav Mukherjee Nov 29 '16 at 07:20
"apart from tree shaking ... because angular-compiler ... is major part of angular2". You **need** to run AOT build before you can perform an effective tree shaking. – maxime1992 Nov 29 '16 at 07:26

score 1 · Answer 2 · answered Mar 01 '17 at 23:55

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.

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

2 Answers2