Angular Quick Reference

What is Ahead of Time (AOT)?

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.

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 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:
content_copy

ng build --aot
ng serve --aot

Why compile with AOT?

  1. 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.
  2. 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.
  3. 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.
  4. Detect template errors earlier: The AOT compiler detects and reports template binding errors during the build step before users can see them.
  5. 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.

Reference Link : Click Here