New to Kendo UI for Angular? Start a free 30-day trial

Ahead-of-Time Compilation

The Ahead-of-Time (AoT) immensely improves the performance of Angular applications.

Overview

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

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.

Install the ngc compiler.

npm install @angular/compiler-cli @angular/platform-server --save

Include a tsconfig-aot.json file that the ngc compiler will use, as demonstrated in the following example.

{
  "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
 }
}

Initiate the AoT compilation using ngc by executing the following command.
sh
```
node_modules/.bin/ngc -p tsconfig-aot.json
```

Ahead-of-Time Compilation

Overview

What Is AoT Compilation

Why Use AoT Compilation

Using Kendo UI with AoT

Compiling Applications with AoT

Suggested Links