Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

Question

JIT - Compile TypeScript just in time for executing it.

• Compiled in the browser.
• Each file compiled separately.
• No need to build after changing your code and before reloading the browser page.
• Suitable for local development.

AOT - Compile TypeScript during build phase.

• Compiled by the machine itself, via the command line (Faster).
• All code compiled together, inlining HTML/CSS in the scripts.
• No need to deploy the compiler (Half of Angular size).
• More secure, original source not disclosed.
• Suitable for production builds.

Although there are some answers but I would like to add some of my findings as well, because I was really confused with what actually is being compiled as in all the cases, TS --> JS conversion happens. I am taking some para from Jeff's blog as a reference.

JIT

The TS code written by the developer is compiled to JS code. Now, this compiled js code is compiled by browser again so that the html can be rendered dynamically as per the user action and accordingly codes for angular ( for components, change detection, Dependency Injection) are also generated at runtime.

(The browser compiler is what takes an application’s directives and components, along with their corresponding HTML and CSS, and creates component factories to quickly stamp out instances with all of their view creation logic.)

When an Angular 2 application is bootstrapped in the browser, the JIT compiler performs a lot of work to analyze the components in the application at runtime and generate code in memory. When the page is refreshed, all the work that has been done is thrown away, and the JIT compiler does the work all over again.

AOT

The TS code written by the developer is compiled to JS code, this js has already been compiled for angular as well. Now, this compiled js code is compiled by the browser again so that the html can be rendered. But, the catch here is that the features of angular have already been taken care of by AOT compiler and hence the browser don't have to worry much about component creation, change detection, Dependency Injection. So, we have :

Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

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.

Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

---

Remaining differences are already covered in bullet points of Benyamin, Nisar & Gaurang.

Feel free to correct me

JIT (Just-in-Time Compilation)

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime.

ng build
ng serve

AOT (Ahead-of-Time Compilation)

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.

ng build --aot
ng serve --aot

Benyamin and Nisar mentioned some good points here. I will add to it.

While theoretically, AOT looks an attractive option than JIT for production purpose but I had my doubt whether AOT really worth it!

Well, I found nice stats by Jeff Cross and it does prove that AOT significantly reduces the bootstrapping time of the app. Below snap from Jeff Cross' post will give you quick idea about it,