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.
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.
-
Install the
ngc
compiler.shnpm install @angular/compiler-cli @angular/platform-server --save
-
Include a
tsconfig-aot.json
file that thengc
compiler will use, as demonstrated in the following example.ts{ "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.shnode_modules/.bin/ngc -p tsconfig-aot.json