JIT vs AOT in Angular

What is JIT (Just-In-Time) Compilation?

In Angular, JIT compilation means the application compiles in the browser at runtime. Angular compiler compiles your TypeScript and templates into JavaScript code on the client side when the app loads.

• Compilation happens in the browser at runtime.
• Useful for development because build is faster and supports live reloading.
• Slower startup because browser must compile templates first.

What is AOT (Ahead-Of-Time) Compilation?

AOT compilation means the Angular compiler runs at build time and generates optimized JavaScript before deployment. The browser downloads and runs the precompiled application.

• Compilation happens at build time on the developer machine.
• Faster startup because the browser runs precompiled code.
• Smaller bundle size and more secure (templates are already compiled).

Side-by-side Comparison

Aspect	JIT	AOT
When compiled	At runtime in the browser	At build time before deployment
Build time	Faster builds	Slower builds (extra compilation step)
App startup	Slower (compilation happens in browser)	Faster (precompiled code runs immediately)
Bundle size	Larger	Smaller and optimized
Use cases	Development and debugging	Production deployment

Example Usage

Consider building an Angular app using the Angular CLI:

JIT Build (Development Mode)

ng serve
  

This serves the app with JIT compilation. Fast build, good for development with live reload, but slower startup in the browser.

AOT Build (Production Mode)

ng build --prod --aot
  

This builds the app with AOT compilation. The templates are compiled ahead of time, resulting in smaller bundles and faster load times in production.

Quick Summary

JIT: Faster developer builds, good for local testing.
AOT: Slower build but faster runtime, smaller bundles, best for production.