Open In App
Related Articles

What is AOT and JIT Compiler in Angular ?

Like Article
Save Article
Report issue

An angular application mainly consists of HTML templates, their components which include various TypeScript files. There are some unit testing and configuration file. Whenever we run over an application, the browser cannot understand the code directly hence we have to compile our code.

What is Ahead of Time (AOT) compiler ?

All technologies Ahead of Time is a process of compiling higher-level language or intermediate language into a native machine code, which is system dependent.

In simple words, when you serve/build your angular application, the Ahead of Time compiler converts your code during the build time before your browser downloads and runs that code. From Angular 9, by default compiling option is set to true for ahead of time compiler.  

Why should you use the Ahead of Time compiler ?

  • When you are using Ahead of Time Compiler, compilation only happens once, while you build your project.
  • We don’t have to ship the HTML templates and the Angular compiler whenever we enter a new component.
  • It can minimize the size of your application.
  • The browser does not need to compile the code in run time, it can directly render the application immediately, without waiting to compile the app first so, it provides quicker component rendering.
  • The Ahead of time compiler detects template error earlier. It detects and reports template binding errors during the build steps before users can see them.
  • AOT provides better security. It compiles HTML components and templates into JavaScript files long before they are served into the client display. So, there are no templates to read and no risky client-side HTML or JavaScript evaluation. This will reduce the chances of injections attacks.

How Ahead of Time works ?

We use Typescript, HTML, style-sheets to develop our Angular project and ng build –prod or ng build to build our source code into bundles which include JS files, index.html, style-sheets, and assets files.

Now Angular uses the angular compiler (whichever you have selected) to build source code, and they do it in three phases, which are code analysis, code generation and template type checking. At the end of this process, bundle size will be much smaller than the JIT compiler’s bundle size.

After that AOT builds this into a war file to deploy directly by using Heroku or by JBoss or by any other hosting that supports Node. And then we map this host to the domain by using a CNAME.

Now the clients can access your web application via the domain. The browser will download all necessary files like HTML, style-sheets, and JavaScript which is needed for the default view.  At last, your application will get bootstrap and get rendered.  

How to compile your app in ahead of time compiler: For compiling your app in Ahead of time, you don’t have to do much, because from angular 9 default compiling option is set to Ahead of time. Just add –AoT at the end ng serve –aot.

What is the Just in Time (JIT) compiler ?

Just in time compiler provides compilation during the execution of the program at a run time before execution. In simple words, code get compiles when it’s needed, not at the build time.

Why and When Should you use Just In Time Compiler ?

  • Just in time compiler compiles each file separately and it’s mostly compiled in the browser. You don’t have to build your project again after changing your code.
  • Most compiling is done on the browser side, so it will take less compiling time.
  • If you have a big project or a situation where some of your components don’t come in use most of the time then you should use the Just in time compiler.
  • Just in Time compiler is best when your application is in local development.

How Just in Time compiler Works?

Initially, compiler was responsible for converting a high-level language into machine language, which would then be converted into executable code.

Just in time compiler, compiles code at runtime which means instead of interpreting byte code at build time, it will compile byte code when that component is called.

A few important points:

  • In case of Just in time, not all code is compiled at the initial time. Only necessary component which are going to be needed at the starting of your application will be compiled. Then if the functionality is need in your project and it’s not in compiled code, that function or component will be compiled.
  • This process will help to reduce the burden on the CPU and make your app render fast.
  • One more interesting thing is, you can see and link to your source code in inspect mode because Just in Time, compiles your code with JIT mode and a map file.

Comparison between Ahead of Time (AOT) and Just in Time (JIT) –

JIT downloads the compiler and compiles code exactly before Displaying in the browser.AOT has already complied with the code while building your application, so it doesn’t have to compile at runtime.
Loading in JIT is slower than the AOT because it needs to compile your application at runtime.Loading in AOT is much quicker than the JIT because it already has compiled your code at build time.
JIT is more suitable for development mode.AOT is much suitable in the case of Production mode.
Bundle size is higher compare to AOT.Bundle size optimized in AOT, in results AOT bundle size is half the size of JIT bundles.

You can run your app in JIT with this command:

ng build OR ng serve

To run your app in AOT you have to provide –aot at the end like:

ng build --aot OR ng serve --aot  
You can catch template binding error at display time.You can catch the template error at building your application.

Conclusion: You can compile your angular application in two ways: JIT and AOT. Both are suitable for a different scenario like you can use JIT for development mode and AOT is better in production mode.  Implementing features and debugging is easy in JIT mode since you have to map files while AOT does not have it. However, that AOT provides a big benefit to angular developers for production mode by reducing bundle size and making your app render faster.

Last Updated : 05 Nov, 2020
Like Article
Save Article
Share your thoughts in the comments
Similar Reads