Angular Web Framework Services & Dependency Injection 2 — Questions and Answers
Question 1: Which Angular decorator marks a class as available to the DI system as a provider?
- @Component
- @NgModule
- @Injectable (Correct answer)
- @Inject
Correct answer: @Injectable
@Injectable marks a class so Angular's DI system knows it can be injected and, if needed, also inject its own dependencies.
Question 2: What does the `providedIn: 'root'` option inside @Injectable do?
- Registers the service only in the root NgModule's providers array
- Creates a singleton instance available application-wide via the root injector (Correct answer)
- Prevents the service from being tree-shaken
- Scopes the service to the root component only
Correct answer: Creates a singleton instance available application-wide via the root injector
providedIn: 'root' registers the service with the root injector, producing a single shared instance across the entire app and enabling tree-shaking.
Question 3: How do you inject a service into an Angular component using the modern inject() function (Angular 14+)?
- this.service = new MyService();
- private service = inject(MyService); (Correct answer)
- @Inject(MyService) service: MyService;
- providers: [MyService] inside @Component
Correct answer: private service = inject(MyService);
The inject() function, called in an injection context (constructor or field initializer), retrieves the service from the current injector without constructor parameter syntax.
Question 4: What is the purpose of the `@Inject()` decorator on a constructor parameter?
- It enables property injection instead of constructor injection
- It specifies an injection token when the dependency type alone is insufficient (Correct answer)
- It marks the parameter as optional
- It scopes the injected value to the current component
Correct answer: It specifies an injection token when the dependency type alone is insufficient
@Inject(TOKEN) explicitly tells Angular which DI token to use for that parameter, commonly used with InjectionToken values.
Question 5: Which provider syntax uses an existing service instance to satisfy a different token?
- { provide: X, useClass: Y }
- { provide: X, useFactory: () => new Y() }
- { provide: X, useExisting: Y } (Correct answer)
- { provide: X, useValue: Y }
Correct answer: { provide: X, useExisting: Y }
useExisting creates an alias so that token X resolves to the same instance already registered under token Y.
Question 6: In a lazy-loaded module, where is a service provided if it is listed in that module's `providers` array?
- The root injector, shared with all modules
- A child injector created specifically for that lazy module (Correct answer)
- The component injector of the module's root component
- A platform injector shared across all apps on the page
Correct answer: A child injector created specifically for that lazy module
Lazy-loaded modules get their own child injector, so services provided there are isolated to that module and not shared with the rest of the application.
Question 7: What Angular CLI command generates a new service named `data` in a `services` folder?
- ng generate component services/data
- ng add service services/data
- ng generate service services/data (Correct answer)
- ng create service data --path=services
Correct answer: ng generate service services/data
ng generate service services/data creates data.service.ts and its spec file inside the services/ directory.
Angular Web Framework Services & Dependency Injection 2
Which Angular decorator marks a class as available to the DI system as a provider?