Angular Web Framework Performance Optimization & Build Tools 1 — Questions and Answers
Question 1: Which Angular feature delays loading a module until a user navigates to its associated route?
- Tree-shaking
- Ahead-of-Time compilation
- Lazy loading (Correct answer)
- Pre-fetching
Correct answer: Lazy loading
Lazy loading uses the loadChildren property in routing config to split a module into a separate chunk downloaded on demand.
Question 2: What is the purpose of the Angular CLI command `ng build --configuration production`?
- Runs unit tests
- Starts the dev server
- Compiles the app with optimizations like minification and tree-shaking (Correct answer)
- Generates new components
Correct answer: Compiles the app with optimizations like minification and tree-shaking
The production build enables AOT compilation, minification, dead code elimination, and differential loading for optimized output.
Question 3: Which Angular directive efficiently re-renders only changed items in a list by tracking identity?
- *ngIf
- *ngFor with trackBy (Correct answer)
- async pipe
- *ngSwitch
Correct answer: *ngFor with trackBy
*ngFor with a trackBy function lets Angular identify which list items changed, avoiding full DOM re-creation on each update.
Question 4: What does Ahead-of-Time (AOT) compilation do in Angular?
- Compiles templates in the browser at runtime
- Compiles templates and TypeScript during the build step (Correct answer)
- Defers compilation until first user interaction
- Compiles only lazy-loaded modules
Correct answer: Compiles templates and TypeScript during the build step
AOT compiles Angular HTML templates and TypeScript code into JavaScript during the build, producing faster startup and smaller bundles.
Question 5: Which Angular SSR strategy pre-renders pages at build time for immediate static HTML delivery?
- Client-side rendering
- Server-side rendering on request
- Static site generation (prerendering) (Correct answer)
- Deferred loading
Correct answer: Static site generation (prerendering)
Angular's prerender feature (ng-universal or Angular 17+ built-in) generates static HTML files at build time for instant first-paint.
Question 6: What Angular pipe should you use to avoid repeated heavy computations in templates?
- async
- json
- Pure custom pipe (Correct answer)
- Impure custom pipe
Correct answer: Pure custom pipe
A pure pipe is only re-executed when its input reference changes, caching the result and skipping recomputation on every change detection cycle.
