AOT vs JIT compilation: what does ahead-of-time win?
understanding of compilation strategies and their trade-offs.
AOT compiles templates at build time (catches errors early, smaller bundle, faster startup), JIT compiles in browser (slower startup, larger bundle, flexible).
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.
A 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).
Interview question
Your template references a non-existent component property. Will AOT or JIT catch this error, and when?
- a.Neither; property access is dynamic and can't be checked
- b.Both catch it, but AOT is earlier
- c.JIT catches it at browser runtime
- d.AOT catches it at build timeCorrect
Why? this is the answer
AOT compiles templates at build time, so type errors (undefined properties) are caught before deployment. JIT compiles in the browser, so errors surface in the console at runtime (too late for production). Option B is partially right but A is the most direct answer. Option A is wrong; AOT has type information.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
- #angular-compilation
- #aot
- #jit
- #build-optimization
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles