Angular(Compiler) - JIT VS AOT

The HTML and Component (TypeScript) file in an Angular project need to be compiled to a JavaScript file to run on the browser, There are two major ways of doing this depending on when the compilation happens: Just In Time (JIT) and Ahead Of Time (AOT). Let's see the differences

---

JIT (Just In Time) Compiler

JIT compiler compiles each file when a browser runs (runtime compilation). The method needs to download complier each time so it is slower and has a bigger size. Recommanded to use in a local development environment.

AOT (Ahead Of Time) Compiler

This is a default compiler since Angular 9. This method compiles the code before the browser runs (build time compliation)

ng build --prod

ng server --aot

Pros	Description
Improved Speed	AOT does not wait for the compilation to be completed and this leads to improved rendering speed
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.
Small Sizes	AOT does not need to download the Angular compiler which charges up almost half the application size
Less Errors	Easier to find errors as errors show up earlier in the building process
Security	Do not expose the client-side code as browser won't have an access to the code

AOT Compiler

---

References

Angular