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 guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
Here are some reasons you might want to use AOT.
| Reasons |
Details |
| 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 application 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 application 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. |
Choosing a compiler
Angular offers two ways to compile your application :
| Angular compile |
Details |
| Just-in-Time (JIT) |
Compiles your application in the browser at runtime. This was the default until Angular 8. |
| Ahead-of-Time (AOT) |
Compiles your application and libraries at build time. This is the default starting in Angular 9. |
When you run the
ng build (build only) or
ng serve (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the
aot property in your build configuration specified in
angular.json. By default,
aot is set to
true for new CLI applications.
