AOT vs JIT compilation: what does ahead-of-time win?

WHY IT EXISTS: Angular templates (HTML with directives like *ngIf, [prop], (click)) aren't plain HTML; they're a template language. Someone must compile them to JavaScript. AOT does this at build time (ng build --aot). JIT does it at runtime (in the browser). Each has different costs and benefits.

THE MENTAL MODEL: AOT is like compiling source code before shipping. You catch syntax errors, type mismatches in templates, and unused directives at build time. The shipped bundle contains only JavaScript, no template compiler. Startup is instant; no compilation needed. JIT is like shipping source code and compiling on the user's machine. Templates are shipped as-is, a compiler runs in the browser on first load, and the app boots. Slower startup, larger bundle (includes the compiler), but more flexible.

HOW IT WORKS: With AOT, ng build parses every template, compiles them to JavaScript functions, and bundles the output. If a template has [prop]="nonexistentProp", the build fails and you fix it. With JIT, ng build bundles raw templates; at runtime, the compiler parses them. Errors appear in the browser console, not at build. Bundle size: AOT omits the Angular compiler (roughly 2.5 MB), so the bundle is smaller. JIT includes it, so bundles are larger. Startup: AOT apps start instantly. JIT apps have a delay while the compiler runs (noticeable on mobile).

WHEN IT MATTERS: Production apps almost always use AOT (it's the default in ng build now). Development is traditionally JIT because rebuilds are faster (no template compilation), but Angular CLI now also supports development AOT. Large, performance-critical apps (mobile, emerging markets) especially benefit from AOT startup gains.

ONE CONCRETE EXAMPLE: An Angular app with a template {{ user.name }}. AOT: compiler reads the template, generates a function updateViewUser() { ... }, includes it in the bundle. If you later misspell user.names, the build fails. JIT: the bundle includes the raw template string. At runtime, the compiler parses and generates that function. Misspellings surface as errors in the browser. App shipped: AOT bundle is 2 MB, JIT is 4.5 MB. User on a slow connection: AOT app interactive in 1.5 seconds, JIT in 3 seconds (1.5 seconds to download + 1.5 seconds compiler runtime).