Angular Web Framework Services & Dependency Injection 5 — Questions and Answers
Question 1: What is tree-shakable about a service declared with `@Injectable({ providedIn: 'root' })`?
- The service is removed if its NgModule is not imported
- The service is excluded from the bundle if nothing in the app injects it (Correct answer)
- The service's methods are removed if they are never called
- The service is split into smaller chunks by the router
Correct answer: The service is excluded from the bundle if nothing in the app injects it
Because the provider registration lives on the service class itself rather than in an NgModule, bundlers can detect unused services and omit them from the output.
Question 2: What happens when you use `useClass` in an Angular provider and specify a class different from the token?
- Angular throws a type mismatch error at compile time
- Angular instantiates the specified class whenever the token is requested (Correct answer)
- Angular uses the original class but copies properties from the specified class
- Angular creates both instances and merges their methods
Correct answer: Angular instantiates the specified class whenever the token is requested
useClass tells Angular to instantiate the given class when the provider token is resolved, enabling substitution of alternative implementations.
Question 3: How can you inject a service only into a component's view children, not into projected ng-content children?
- Use providers: [] in the @Component decorator
- Use viewProviders: [] in the @Component decorator (Correct answer)
- Use @ViewChild to manually pass the service reference
- Use providedIn: 'view' in @Injectable
Correct answer: Use viewProviders: [] in the @Component decorator
viewProviders registers services that are only accessible inside the component's own template, invisible to content inserted via ng-content.
Question 4: Which approach correctly provides an Angular service in a standalone component?
- Add the service class to the standalone component's imports array
- Add the service class to the standalone component's providers array (Correct answer)
- Decorate the service with @Standalone()
- Export the service from the standalone component's exports array
Correct answer: Add the service class to the standalone component's providers array
Standalone components support a providers array in @Component where you register services scoped to that component's injector.
Question 5: What does the `multi: true` option in an Angular provider definition do?
- Allows the provider to be registered in multiple modules simultaneously
- Causes the token to resolve to an array containing all registered values for that token (Correct answer)
- Creates multiple instances of the service, one per component
- Enables the service to provide values to multiple injection tokens at once
Correct answer: Causes the token to resolve to an array containing all registered values for that token
When multi: true is set, Angular collects all providers registered under the same token into an array rather than overwriting each other.
Question 6: What Angular token is used with `multi: true` to run initialization logic before the app bootstraps?
- PLATFORM_INITIALIZER
- APP_BOOTSTRAP_LISTENER
- APP_INITIALIZER (Correct answer)
- DOCUMENT
Correct answer: APP_INITIALIZER
APP_INITIALIZER accepts factory functions via multi: true; Angular awaits any returned Promises before rendering the first component.
Question 7: In Angular, when is it appropriate to call `Injector.create()` to build a child injector manually?
- To register application-wide services at startup
- When you need a scoped injector outside the normal component tree, such as in a dynamic component scenario (Correct answer)
- To replace TestBed in unit tests
- To register services after the app has bootstrapped using NgZone
Correct answer: When you need a scoped injector outside the normal component tree, such as in a dynamic component scenario
Injector.create() is used to build ad-hoc child injectors with custom providers, useful when dynamically creating components or services outside Angular's normal hierarchy.
Angular Web Framework Services & Dependency Injection 5
What is tree-shakable about a service declared with `@Injectable({ providedIn: 'root' })`?