Ahead-of-time (AOT) compilation with Angular 2

Why we need compilation, Flow of events compilation and example?

Q. Why we need compilation? Ans. We need compilation for achieving higher level of efficiency of our Angular applications.

Take a look at the following example,

// ...
compile: function (el, scope) {
  var dirs = this._getElDirectives(el);
  var dir;
  var scopeCreated;
  dirs.forEach(function (d) {
    dir = Provider.get(d.name + Provider.DIRECTIVES_SUFFIX);
    if (dir.scope && !scopeCreated) {
      scope = scope.$new();
      scopeCreated = true;
    }
    dir.link(el, scope, d.value);
  });
  Array.prototype.slice.call(el.children).forEach(function (c) {
    this.compile(c, scope);
  }, this);
},
// ...

Using the code above to render the template,

<ul>
  <li *ngFor="let name of names"></li>
</ul>

Is much slower compared to:

// ...
this._text_9 = this.renderer.createText(this._el_3, '\n', null);
this._text_10 = this.renderer.createText(parentRenderNode, '\n\n', null);
this._el_11 = this.renderer.createElement(parentRenderNode, 'ul', null);
this._text_12 = this.renderer.createText(this._el_11, '\n  ', null);
this._anchor_13 = this.renderer.createTemplateAnchor(this._el_11, null);
this._appEl_13 = new import2.AppElement(13, 11, this, this._anchor_13);
this._TemplateRef_13_5 = new import17.TemplateRef_(this._appEl_13, viewFactory_HomeComponent1);
this._NgFor_13_6 = new import15.NgFor(this._appEl_13.vcRef, this._TemplateRef_13_5, this.parentInjector.get(import18.IterableDiffers), this.ref);
// ...

Flow of events with Ahead-of-Time Compilation

In contrast, with AoT we get through the following steps:

1. Development of Angular 2 application with TypeScript.
2. Compilation of the application with ngc.
3. Performs compilation of the templates with the Angular compiler to TypeScript.
4. Compilation of the TypeScript code to JavaScript.
5. Bundling.
6. Minification.
7. Deployment.

Although the above process seems lightly more complicated the user goes only through the steps:

1. Download all the assets.
2. Angular bootstraps.
3. The application gets rendered.

As you can see the third step is missing which means faster/better UX and on top of that tools like angular2-seed and angular-cli will automate the build process dramatically.

I hope it might help you! Thank you!

1. Install Angular 2 dependencies with compiler

NOTE: for best results, make sure your project was created using the Angular-CLI.

npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server}

You don't have to do this step if you project already has angular 2 and all of these dependencies installed. Just make sure that the compiler is in there.

2. Add angularCompilerOptions to your tsconfig.json file

...
"angularCompilerOptions": {
    "genDir": "./ngfactory"
}
...

This is the output folder of the compiler.

3. Run ngc, the angular compiler

from the root of your project ./node_modules/.bin/ngc -p src where src is where all your angular 2 code lives. This will generate a folder called ngfactory where all your compiled code will live.

"node_modules/.bin/ngc" -p src for windows

4. Modify main.ts file to use NgFactory and static platform browser

// this is the static platform browser, the usual counterpart is @angular/platform-browser-dynamic.
import { platformBrowser } from '@angular/platform-browser';

// this is generated by the angular compiler
import { AppModuleNgFactory } from './ngfactory/app/app.module.ngfactory';

// note the use of `bootstrapModuleFactory`, as opposed to `bootstrapModule`.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

At this point you should be able to run your project. In this case, my project was created using the Angular-CLI.

> ng serve

Using AoT Compilation with Angular CLI

The Angular CLI (opens new window) command-line interface has AoT compilation support since beta 17.

To build your app with AoT compilation, simply run:

ng build --prod --aot