All Components

Ahead-of-Time Compilation

The Ahead-of-Time (AoT) immensely improves the performance of an Angular 2 application.

Overview

This section provides information on what AoT compilation is and how it works.

What Is AoT Compilation

AoT Compilation is the process of compiling components and their HTML templates during a build process, so that the application, its components and their templates are converted to executable JavaScript code before the browser renders them. The AoT compilation is done by the Angular compiler.

For more information, refer to the Angular AoT documentation.

Why Use AoT Compilation

Among the basic reasons to opt for the AoT compilation are:

  • To accelerate rendering—The executable JavaScript code format allows the browser to render the application immediately without having to compile it first.
  • To detect errors in advance—The Angular compiler is able to detect errors during the build process, so they can be fixed before the user accesses the application in the browser.

Using Kendo UI with AoT

Out of the box, all Kendo UI components for Angular 2 support AoT compilation.

Compiling Applications with AoT

This is an example on how to get AoT running in your application. Note that your starter template might already be handling this for you.

  1. Install the ngc compiler:

    npm install @angular/compiler-cli @angular/platform-server --save
  2. Include a tsconfig-aot.json file that the ngc compiler will use, as demonstrated in the example below:

    {
     "compilerOptions": {
       "target": "es5",
       "module": "es2015",
       "moduleResolution": "node",
       "sourceMap": true,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
       "removeComments": false,
       "noImplicitAny": true,
       "suppressImplicitAnyIndexErrors": true
     },
    
     "files": [
       "app/app.module.ts",
       "app/main.ts"
     ],
    
     "angularCompilerOptions": {
      "genDir": "aot",
      "skipMetadataEmit" : true
    }
    }
  3. Initiate the AoT compilation using ngc by executing the following command:

    node_modules/.bin/ngc -p tsconfig-aot.json
In this article