yoklainterview sim
ProgressHistory

Frontend Angular Dependency Injection Interview Questions

75 verified Frontend Angular Dependency Injection interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Angular Dependency InjectionDifficulty 1
What is the primary purpose of the @Injectable() decorator in Angular?
  • aMarks a class for construction by Angular's DI system✓
  • bMarks a class as an Angular component
  • cRegisters a class as an HTTP interceptor
  • dDeclares a class as a routing guard
Explanation:@Injectable() tells Angular's compiler and DI system that this class can be constructed and injected, optionally attaching metadata like providedIn. It is unrelated to @Component (view classes) or to being specifically a guard/interceptor — those are separate roles a class can additionally take on.
Angular Dependency InjectionDifficulty 1
What does providedIn: 'root' mean when configuring @Injectable()?
  • aThe service is only usable inside components declared by AppModule
  • bThe root injector provides one shared service instance✓
  • cThe service must still be manually listed in a module's providers array
  • dThe service is scoped only to lazy-loaded feature modules
Explanation:providedIn: 'root' tells Angular's compiler to register the provider with the root injector automatically, without needing it in any module's providers array. The service becomes a singleton shared across the whole app, and if nothing ever injects it, the bundler can tree-shake it away.
Angular Dependency InjectionDifficulty 1
How does an Angular component typically receive an instance of an injectable service?
  • aBy calling new ServiceName() directly inside the component
  • bBy importing the service class into the HTML template
  • cBy using its type as a constructor parameter✓
  • dBy assigning it to a static property on the component class
Explanation:Angular's DI resolves constructor parameter types and supplies matching instances automatically — this is constructor injection, the standard pattern. Calling new directly bypasses DI entirely, losing singleton behavior and the injector hierarchy.
Angular Dependency InjectionDifficulty 1
If a service is injected somewhere but no injector in the chain has a provider for it (and it has no providedIn), what happens?
  • aAngular silently injects null
  • bAngular creates a default empty instance automatically
  • cThe component renders normally, ignoring the missing dependency
  • dAngular throws a NullInjectorError at runtime✓
Explanation:Angular's DI resolves the token by walking up the injector tree; if no injector along that path (and no providedIn) has a provider for it, resolution fails and Angular throws a NullInjectorError, naming the missing token.
Angular Dependency InjectionDifficulty 1
@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(msg: string) { console.log(msg); }
}

@Component({ selector: 'app-root', template: '' })
export class AppComponent {
  constructor(private logger: LoggerService) {}
}

What creates the LoggerService instance that AppComponent receives here?
  • aAngular's injector, using the constructor parameter type✓
  • bThe component's template, during its first render
  • cA manual new LoggerService() call generated behind the scenes
  • dThe @Component decorator's providers array, which is required for this to work
Explanation:Because LoggerService uses providedIn: 'root', Angular's root injector already has a provider for it; the DI system reads the type of the logger constructor parameter and supplies the singleton instance automatically — no providers array on @Component is needed.
Angular Dependency InjectionDifficulty 1
Angular has a hierarchical injector system. What does this mean at a basic level?
  • aOnly one single injector exists for the whole application, at the root
  • bDependency lookup walks from local injectors toward ancestor injectors✓
  • cEvery call to inject a dependency creates a brand-new, isolated injector
  • dInjector hierarchy only applies to lazy-loaded routing modules
Explanation:Angular builds a tree of injectors that mirrors the app's structure: a root/module injector plus a per-component 'element injector' for components that declare their own providers. When a dependency is requested, Angular searches starting from the requesting component's injector and walks upward until a provider is found.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview