JIT vs AOT compiler in Angular!

We all know that the browser understands javascript code but how the angular code work (TypeScript). To do all this angular provides us its own compiler.

The angular compiler executes in two different ways -

1. JIT (Just In Time Compilation)
2. AOT (Ahead Of Time Compilation)

Let's see about JIT.

1. JIT (Just In Time Compilation)
JIT stands for Just In Time Compilation. In JIT approach, the angular code gets compiled at the run time using a typescript (tsc) compiler.

While developing an angular application, it consists of typescript code and angular specific code (like bindings,decorators). In order to run this application in angular , both these codes need to be converted to javascript code.

Here you can observe the flow.

By using JIT approach there are some advantages as well as disadvantages. The disadvantages for using JIT approach are:-

1. The code has to undergo compilation twice.
   a) First through typescript compiler to translate typescript code.
   b) Second through angular compiler to translate angular code.

2. As angular code gets executed at the run time, all the errors with respect to angular code are highlighted at the run time.

Now we will see how AOT overcomes these disadvantages.

2. AOT (Ahead Of Time Compilation)
AOT compilation stands for Ahead Of Time compilation. In AOT approach,the angular code gets compiled at the build time using the angular (ngc) compiler.

Let us see how the AOT approach works to compile the angular applications.

Compared to the Typescript compiler, ngc compiler also does the same thing i.e. translates the TS code to JS code. But along with that it also takes the angular code i.e decorators, bindings, etc., and pre compiles them into imperative code before the application loads in the browser.

Hence, both typescript and angular code are in the executable format before the run time.

AOT approach in angular provides us with many advantages such as:

1. Rendering is faster.
2. Helps to find the build errors during build time itself.
3. Helps in reducing the size of the angular framework.

Note:- All the versions till Angular 8 used the JIT approach by default. From Angular 9, they made AOT mode as the default compilation approach.

Thanks for Reading !