Angular 7

Ahead-of-Time compilation (AOT)

Ahead-of-Time compilation (AOT)

1.The developer gives ngc command in the Command Prompt; Then the “ngc” compiler compiles

the templates into JavaScript code; the compiled JavaScript code will be loaded into the browser and it directly executes. 

2.There is no need of loading “templates (.html files)” and “angular compiler scripts” into the browser.

3.It is a type of compilation Runs once at build time or compiles our code at build time

4. Flow of AOT:

  • Compiler transforms TS code to JS code, this JS has already has been compiled for angular as well. Now, this compiled JS code is compiled again by browser again so that the HTML can be rendered. Hence, the features of angular have already been taken care by AOT compiler and hence browser does not have to take care much about change detection, component creation, and Dependency Injection.
  1. It Compiled the code by the machine itself, via the command line (CLI) that makes it Faster.
  2. All code of application is compiled together, in lining HTML/CSS in the scripts.
  3. This is suitable for production builds.
  4. If there is any binding error then Template binding errors are shown at the time of building.
  5. Loads the application much quicker and faster than the JIT compilation.
  6. Bootstrapping is done by “@angular/platform-browser” package.
  7. For AOT compilation following command is use:

ng build --aot

ng serve --aot

  1. AOT compilation code include the fully compiled code and its already optimized so its bundle size is half of the bundle size compiled by JIT compilation.
  2. Advantage:
  • It provides better and fast performance. Because the template is already fully compiled and optimized.

3.Disadvantage:

  • The developer needs to compile it manually at command prompt (CLI) for each and every modification of application code.