The Ahead-of-Time (AOT) compiler

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

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. Compiling your application during the build process provides a faster rendering in the browser.

This tutorial explains the concepts of AOT, how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.

Angular compilation

In Angular, there are 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 ng build (build only) or ng serve (build and serve locally) CLI commands:

```
ng build
ng serve
```

For AOT compilation, include the --aot option with the ng build or ng serve command:

```
ng build --aot
ng serve --aot
```

The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

Why compile with AOT?

• Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

• 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. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

• 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. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Controlling app compilation

When you use the Angular AOT compiler, you can control your app compilation in two ways:

• By providing template compiler options in the tsconfig.json file.
• By specifying Angular metadata.

Specifying Angular metadata

Angular metadata tells Angular how to construct instances of your application classes and interact with them at runtime. The Angular AOT compiler extracts metadata to interpret the parts of the application that Angular is supposed to manage.

You can specify the metadata with decorators such as @Component() and @Input() or implicitly in the constructor declarations of these decorated classes.

In the following example, the @Component() metadata object and the class constructor tell Angular how to create and display an instance of TypicalComponent.

@Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
)}
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { }
}

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen WBEWvV by w3resource (@w3resource) on CodePen.

The Angular compiler extracts the metadata once and generates a factory for TypicalComponent. When it needs to create a TypicalComponent instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.

Angular template compiler options

The template compiler options are specified as members of the "angularCompilerOptions" object in the tsconfig.json file. Specify template compiler options along with the options supplied to the TypeScript compiler as shown here in this example code snippet:

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

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen MdvRyy by w3resource (@w3resource) on CodePen.

Previous: Workspace npm dependencies
Next: Browser support