An angular application mainly consists of HTML templates, their components which include various TypeScript files.
Whenever we run over an application, the browser cannot understand the code directly (Because of component, new directive, etc.. ) hence we have to compile our code.
We have 2 alternative to do it : AOT (Ahead of Time Compiler) or JIT (Just in Time Compiler)
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 to compile our app in ahead of time compiler:
We 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, provides compilation during the execution of the program at a run time before execution. In simple words, (template) code get compiles when it’s needed, not at the build time.
Why and When Should you use Just In Time Compiler ?
- 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.
Comparison between Ahead of Time (AOT) and Just in Time (JIT)
| JIT | AOT |
| JIT downloads the (Angular)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. |
PS: don´t be confused between AOT and SSR (Server Side Rendering)
What’s the difference between Angular AOT and Universal?
Angular AOT is not actually a technology for the RENDERING of the UI. The Angular AOT compiler converts your Angular HTML and TS code into efficient JavaScript code” ( angular.io/guide/aot-compiler ). That code is still run on client-side to render the first and every other view. (The views are already compiled but not rendered)
Angular Universal is all about server-side rendering of the initial page load. SSR is not an alternative but an additional technique to further increase performance for first-time visitors and SEO, as the first view is rendered on server side and the client receives that assembled and styled HTML, so there is no need to dynamically render anything at the beginning. (The first view is already compiled and rendered)