How does ngc work in Angular AOT and what artifacts improve performance?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: angular.dev