How does ngc work in Angular AOT and what artifacts improve performance?
This tests understanding of AOT build-phase compilation and output. Cover efficient JS output, inlined templates and styles cutting AJAX requests, and removal of compiler payload roughly half of Angular. Red flag: conflating AOT and JIT or calling it bundling.
What's really being asked
This question probes whether you understand the Angular AOT compiler as a build-phase transformation tool rather than a runtime convenience. The interviewer wants to see that you know the compiler interprets Angular-specific metadata and templates that browsers cannot execute natively, and that you can articulate the concrete artifacts and performance outcomes that result from shifting this work ahead of runtime.
The full answer
First, state that the Angular AOT compiler converts HTML templates and TypeScript into efficient JavaScript during the build phase before the browser ever downloads the code. Second, explain that it extracts metadata from decorators like Component and constructor declarations, then generates factories so Angular knows how to construct and manage instances at runtime. Third, list the specific artifacts and benefits: inlined external HTML templates and CSS stylesheets that eliminate separate AJAX requests; removal of the Angular compiler from the client payload, which reduces download size by roughly half because the compiler is about half of Angular itself; and pre-compiled executable code that lets the browser render immediately without waiting to compile. Fourth, mention secondary wins like catching template binding errors during the build step and improving security by removing client-side template evaluation and reducing injection attack surface.
The mistakes people make
A red flag is describing AOT as merely minification or tree-shaking rather than a semantic compilation step. Another mistake is conflating AOT with JIT, which compiles in the browser at runtime and was the default only until Angular 8. Candidates also err by omitting the factory generation aspect or failing to mention that inlining templates and styles removes asynchronous requests. Saying the browser still downloads the compiler is a significant factual error.
What usually comes next
An interviewer might ask how the aot flag in angular.json controls compilation during ng build and ng serve, or why Angular 9 made AOT the default. They could also ask you to contrast the security model of AOT against JIT, or how metadata extraction enables dependency injection without runtime reflection.
A concrete example
Suppose a component references an external templateUrl and styleUrls. Under AOT, the compiler inlines that HTML and CSS directly into the generated JavaScript during the build, so the browser makes zero additional AJAX requests for those files. The component metadata is extracted once to produce a factory, and the resulting bundle contains only executable JavaScript with no Angular compiler, cutting the payload by roughly half and allowing instant rendering.
Interview question
Which statement accurately describes a key performance benefit of Angular AOT compilation for an app using external templateUrl and styleUrls?
- a.The AOT compiler extracts component metadata at runtime via reflection and generates factories on demand when the user first visits each view.
- b.The AOT compiler inlines external templates and styles into the JavaScript bundle and removes the Angular compiler from the client payload, eliminating extra AJAX requests and reducing download size.Correct
- c.The AOT compiler defers template compilation to the browser and caches the Angular compiler in memory so that subsequent navigations do not require re-downloading it.
- d.The AOT compiler primarily minifies the TypeScript source and tree-shakes unused component metadata during the build to produce a smaller bundle.
Why? this is the answer
AOT performs build-time inlining of templates and styles and strips the Angular compiler from the bundle, which removes separate AJAX fetches and cuts payload size by roughly half. Option D is tempting because minification and tree-shaking do reduce bundle size, but they are bundler concerns, not the semantic compilation step unique to AOT.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
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. Open roles that interview on angular — each one lists the topics its interview covers.
See open roles