Angular Web Framework Angular Professional Development 4 — Questions and Answers
Question 1: In Angular's NgRx state management, what is the correct order of the data flow?
- Action → Reducer → Store → Effect → Action
- Component → Action → Effect → Reducer → Store → Selector → Component (Correct answer)
- Selector → Store → Reducer → Action → Component
- Store → Selector → Effect → Action → Reducer
Correct answer: Component → Action → Effect → Reducer → Store → Selector → Component
NgRx follows: Component dispatches Action → Effects handle async side effects → Reducer updates Store → Selectors derive data back to Component.
Question 2: Which Angular schematic command migrates an existing module-based app to use standalone components?
- ng update @angular/core --migrate-only standalone
- ng generate @angular/core:standalone (Correct answer)
- ng migrate standalone --all
- ng add @angular/standalone-migration
Correct answer: ng generate @angular/core:standalone
Running `ng generate @angular/core:standalone` triggers the official Angular schematic to automatically convert NgModule-based code to standalone APIs.
Question 3: What Angular feature enables deferred loading of a component only when it becomes visible in the viewport?
- @defer (on viewport) (Correct answer)
- loadChildren: () => import()
- @lazy viewport
- NgOptimizedImage with lazy attribute
Correct answer: @defer (on viewport)
Angular 17's `@defer (on viewport)` block renders content lazily once the placeholder enters the browser viewport.
Question 4: In Angular Universal (SSR), what is the purpose of `TransferState`?
- Transfer cookies from server to client securely
- Pass pre-fetched data from the server render to the client to avoid duplicate HTTP requests (Correct answer)
- Serialize the full component state for hydration
- Sync service worker cache with server-rendered HTML
Correct answer: Pass pre-fetched data from the server render to the client to avoid duplicate HTTP requests
`TransferState` serializes data fetched on the server into the HTML, allowing the client to reuse it without making the same HTTP request again.
Question 5: Which zone.js-free approach can be used in Angular 16+ to notify the framework of a data change for change detection?
- Calling `detectChanges()` on ApplicationRef
- Using `markForCheck()` on ChangeDetectorRef
- Writing to a Signal, which automatically schedules a check (Correct answer)
- Dispatching a CustomEvent on the window
Correct answer: Writing to a Signal, which automatically schedules a check
Angular signals automatically schedule change detection when their value is updated, enabling zone-free, fine-grained reactivity.
Question 6: When configuring a custom webpack builder in an Angular project, which file is used to extend the default Angular CLI webpack config?
- webpack.config.js at the project root, referenced in angular.json (Correct answer)
- extra-webpack.config.js imported inside tsconfig.json
- angular.webpack.js declared in package.json scripts
- ng-webpack.config.ts inside the src/ directory
Correct answer: webpack.config.js at the project root, referenced in angular.json
With `@angular-builders/custom-webpack`, a custom `webpack.config.js` is specified under `customWebpackConfig.path` in `angular.json`.
Question 7: What is the primary advantage of using `OnPush` change detection strategy in a high-performance Angular application?
- It prevents the component from ever re-rendering
- It limits re-renders to when Input references change or events fire, reducing check cycles (Correct answer)
- It offloads change detection to a Web Worker
- It makes all child components use Default strategy automatically
Correct answer: It limits re-renders to when Input references change or events fire, reducing check cycles
`OnPush` tells Angular to skip the component during most change detection cycles, only checking it when its inputs change by reference or it receives an event.
Angular Web Framework Angular Professional Development 4
In Angular's NgRx state management, what is the correct order of the data flow?