What is the Angular compilation process (JIT vs AOT)?

Answer

Angular templates must be compiled into JavaScript. Two modes: JIT (Just-In-Time) compilation: templates are compiled in the browser at runtime, right before execution. Used in development with ng serve. Pros: faster build time (no compile step during development), easier debugging (source maps for templates). Cons: larger bundle (compiler included in the bundle), slower application startup (compilation happens at runtime), reveals template errors only at runtime. AOT (Ahead-Of-Time) compilation: templates are compiled to optimized JavaScript at build time — before the browser downloads or runs the code. Used in production with ng build --configuration production. Pros: (1) Faster application startup (no compilation in browser); (2) Smaller bundle (compiler not shipped); (3) Template errors caught at build time (not runtime); (4) Improved security (templates compiled to JavaScript, no injection of HTML/script); (5) Better tree-shaking. Cons: slower build time. Ivy compiler (Angular 9+): Angular's current compilation and rendering pipeline, replacing the older View Engine. Ivy enables: (1) Smaller bundles (locality principle — each component is self-sufficient); (2) Faster testing (no TestBed bootstrap overhead); (3) Incremental DOM compilation; (4) Better debugging (component instances visible in DevTools). Since Angular 9, Ivy is the default. Angular 12+ removed View Engine entirely. AOT is the default for production builds; Angular 9+ also uses AOT in development by default.