Angular Web Framework Services & Dependency Injection 3 — Questions and Answers
Question 1: What is an InjectionToken used for in Angular?
- To generate unique component IDs at runtime
- To create a type-safe token for non-class dependencies like strings or config objects (Correct answer)
- To declare which modules a service belongs to
- To replace @Injectable on service classes
Correct answer: To create a type-safe token for non-class dependencies like strings or config objects
InjectionToken provides a unique, type-safe token for values that cannot be represented by a class, such as configuration objects, strings, or interfaces.
Question 2: Which `providers` syntax allows you to supply a pre-constructed object or primitive value directly?
- { provide: TOKEN, useClass: MyClass }
- { provide: TOKEN, useExisting: OtherToken }
- { provide: TOKEN, useValue: myObject } (Correct answer)
- { provide: TOKEN, useFactory: factoryFn }
Correct answer: { provide: TOKEN, useValue: myObject }
useValue registers a static, pre-built value with the injector so no factory or class instantiation occurs.
Question 3: How do you declare factory dependencies when using `useFactory`?
- List them as constructor parameters of the factory function
- Provide them via the `deps` array in the provider definition (Correct answer)
- Inject them using @Inject inside the factory body
- Declare them in a separate `imports` field of the provider
Correct answer: Provide them via the `deps` array in the provider definition
The deps array in the provider object lists the tokens Angular resolves and passes as arguments to the factory function in order.
Question 4: What does the `@Optional()` decorator do when applied to a constructor parameter?
- Makes the injected service lazy — it is only instantiated on first use
- Allows the injection to resolve to null if the provider is not registered (Correct answer)
- Marks the parameter as having a default value
- Restricts injection to the current module's scope
Correct answer: Allows the injection to resolve to null if the provider is not registered
@Optional() prevents an error when a dependency has no registered provider; Angular injects null instead of throwing.
Question 5: What is the role of the `@Self()` decorator in Angular DI?
- It injects the current component instance into itself
- It restricts resolution to the injector of the current element, never walking up to parent injectors (Correct answer)
- It creates a new instance of the service for each use
- It marks a service as a singleton
Correct answer: It restricts resolution to the injector of the current element, never walking up to parent injectors
@Self() tells Angular to look for the dependency only in the host element's injector and throw if it's not found there.
Question 6: Which class-level `providers` option in @Component creates a new service instance for every component instance?
- providedIn: 'any'
- providers: [MyService] inside @Component metadata (Correct answer)
- providedIn: 'component'
- viewProviders: [] with useClass
Correct answer: providers: [MyService] inside @Component metadata
Adding a service to a component's providers array causes Angular to create a fresh instance scoped to that component and its subtree.
Question 7: What is the difference between `providers` and `viewProviders` in an Angular component?
- viewProviders services are eagerly instantiated; providers are lazy
- viewProviders are visible only to the component's own view, not to projected content (ng-content) (Correct answer)
- providers are tree-shaken; viewProviders are always included in the bundle
- viewProviders require @Injectable while providers do not
Correct answer: viewProviders are visible only to the component's own view, not to projected content (ng-content)
Services in viewProviders are not accessible from content projected via ng-content, whereas providers are visible to both the component's view and projected content.
Angular Web Framework Services & Dependency Injection 3
What is an InjectionToken used for in Angular?