Angular aot vs jit

In this video we will discuss Ahead-of-Time compilation and Just-in-Time compilation in Angular.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In Angular we have 2 models of compilation
JIT - Just-in-Time Compilation : JIT compilation as the name implies, compiles the application Just-in-Time in the browser at runtime.
AOT - Ahead-of-Time Compilation : AOT compilation compiles the application at build time.

By default, with the development build we get JIT compilation. This is how it works. The application code along with the angular compiler is downloaded by the browser. At runtime, when a request is issued to the application, the JIT-compiler in the browser compiles the application code before it is executed. This means our user who made that first request has to wait for the application to compile first.

In our previous videos we have seen that, when we build our angular application, the following JavaScript bundles are generated.
Inline
Main
Polyfills
Styles
Vendor

The vendor bundle contains the compiler along with the angular framework. The compiler code is roughly half of the Angular framework.

There is a tool called source-map-explorer that we can use to inspect the JavaScript bundles. This tool analyzes the source map generated with the bundle and draws a map of all dependencies.

To be able to use this tool we have to install it first. To install this tool, execute the following command
npm install source-map-explorer --save-dev

Once we have the tool installed, if you have not done the development build yet, do the development build using the following command.
ng build

Once the build is complete, you will have the JavaScript bundles along with the source map files. Now execute the following command.

The above command runs the source-map-explorer against the vendor bundle and we see the graph of it. Notice the angular compiler is around 45% percent of the bundle size. As this is development build and not optimised, notice the total size of the bundle is 2.19 MB.

With AOT compilation the angular application is pre-compiled. So this means the browser loads executable code so it can render the application immediately, without waiting to compile the application first.

This also mean with AOT, as the application is already pre-compiled, there is also no need for the browser to download the Angular compiler. As we already know, the compiler code is roughly half of the Angular framework, so omitting it dramatically reduces the application size.

By default, the production build is Ahead-of-Time compiled. So there is no need to bundle up the angular compiler code in the vendor bundle. This brings down the vendor bundle size by almost 50%. In addition it is also minified, uglified and tree-shaked to remove any code that we are not referencing in our application. So the bundler size is further reduced.

Now, execute the following command to generate a production build. Notice I have also turned on sourcemap option. Without the sourcemap we will not be able to use the source-map-explorer tool.
ng build --prod --sourcemap true

Once the production build is complete, execute the following command. Vendor bundle name in your production build may be slightly different. Change it accordingly and execute the command.

The AOT compiler also detects and reports template binding errors at build time itself. Let us understand this with an example.

getText(): string {
return 'Hello Pragim';
}

[div [innerText]='getTex()']

Save changes, and execute the following command. This command does a development build in-memory. At the moment we are not using AOT, so we will not know about the template binding error that is introduced above. Notice at build time we do not see any errors.
ng serve

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[gouravdani]

Very very good literally cleared all my doubts regarding JIT and

[danabaiardi]

excelent.. now default compilation is aot! very well done video!

[poomarimurugan]

Good and very nice with example also. I've one doubt. what is difference between compile and build?.

[smarttech]

Hi Venkat, I am old fan of yours. Can you please make a video series on Angular 14 and advanced concepts of angular

[ASX]

I love you are one of the reasons im in programing.

[mahanteshambiger]

Thanks for the video Venkat.

So, I enabled vendor chunk by adding --vendor-chunk=true in the prod build command to get the vendor file to run the source map explorer.

[lokeshkanna]

Hello Venkat,
Thank you so much for your videos. Could you please make video about what is the proper way to set up angular with c# MVC project in VS code which also uses angular cli and .NET core. There is no proper explanation in the internet. Please make a video on that!

[himanshuupreti]

#interview ques
Can anyone tell me :
How does browser knows if --aot / code is precompiled?
So that it does not Re-compile it on browser and renders fast.

[rameshrathod]

Thank sir, can u make video on lazyloading in Angular

[venkatkasani]

sir like angula2&5, cli course also made one vieo

[nys]

2021:
----
to solve this error " Your source map refers to generated column 35 on line 58, but the source only contains 0 column(s) on that line.
Check that you are using the correct source map"
add --no-border-checks in command line

ng serve now default is aot

to try jit use deprecated command: ng serve --aot false

ng build --prod --aot false not work now, instead in angular.json file set aot to false

[josephregallis]

In my version, there is no vender file in the prod build. Even more lightweight.

[nutandevjoshi]

कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड कुड Venkat :)