What Is the Angular Compiler? The Ahead-of-Time (AOT) Compiler

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile.

Angular offers two ways to compile your application:

1. Just-in-Time (JIT), which compiles your app in the browser at runtime
2. Ahead-of-Time (AOT), which compiles your app at build time.

JIT compilation is the default when you run the build-only or the build-and-serve-locally CLI commands:

ng build
ng serve

For AOT compilation, append the --aot flags to the build-only or the build-and-serve-locally CLI commands:

ng build --aot
ng serve --aot

Why compile with AOT?

Faster rendering with AOT, the browser downloads a pre-compiled version of the application.  

Fewer asynchronous requests the compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size there's no need to download the Angular compiler if the app is already compiled.  

Detect template errors earlier  the AOT compiler detects and reports template binding errors during the build step before users can see them.

Better security AOT compiles HTML templates and components into JavaScript files long before they are served to the client.  

What is Angular Compiler Options ?

You can control your app compilation by providing template compiler options in the tsconfig.json file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of"angularCompilerOptions" object as shown below:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": false,
    ...
  }
}

Overview of Angular Compiler Class  

class Compiler {
  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
  clearCache(): void
  clearCacheFor(type: Type<any>)
}

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.