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 support AoT compilation.

Compiling Applications with AoT

The following steps demonstrate an example on how to get AoT running in your application. Your starter template might already be handling these for you.

1. Install the ngc compiler.

   Copy Codenpm 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 following example.

   Copy Code{
     "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.

   Copy Codenode_modules/.bin/ngc -p tsconfig-aot.json

Suggested Links

• Angular Documentation on AoT Compilation
• Minko Gechev's Blog Post on AoT Compilation
• All Things Angular Telerik Blog Page