How does Angular's hierarchical dependency injection work?

Question

Accepted Answer

Angular's DI is **hierarchical**: injectors form a tree that mirrors the component/module tree. When a component requests a dependency, Angular walks **up** the injector tree until it finds a provider — which controls whether you get a shared singleton or a separate instance per component. ## The injector hierarchy ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` A lookup starts at the requesting component and bubbles up to the root. The **first** provider found wins. ## Where you provide determines scope ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` This is the key lever: `providedIn: 'root'` gives a single shared instance; listing a provider in a component's `providers` array creates a fresh instance scoped to that component subtree (useful for isolating state per component). ## Injection modifiers ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` These decorators control *how far* Angular searches the injector tree — e.g. `@Optional` avoids an error when a dependency is missing, `@SkipSelf` forces using a parent's instance. ## Injection tokens for non-class dependencies ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens let you inject values/config (not just classes) and swap implementations (`useClass`, `useValue`, `useFactory`). ## Why it matters Understanding the hierarchical injector explains *why* a service is shared app-wide vs. duplicated per component — a frequent source of "why do these components share/not-share state?" confusion. Controlling provider scope (`root` vs component `providers`), using modifiers (`@Optional`, `@SkipSelf`), and injection tokens for config/swappable implementations is what makes Angular's DI powerful for both architecture and testing.