Angular Dependency Injection: Hierarchical Injectors and providedIn Explained
Angular Dependency Injection: Hierarchical Injectors and providedIn Explained
04-02-2026, 11:46 AM
What is Hierarchical DI?
Angular creates an injector tree that mirrors the component tree. Each injector can provide its own instance of a service, or inherit from a parent injector. This gives you fine-grained control over service scope and lifetime.
providedIn Options
- providedIn: 'root' — Singleton across the entire app. Tree-shakable.
- providedIn: 'any' — Each lazy-loaded module gets its own instance.
- providedIn: 'platform' — Shared across multiple Angular apps on the same page.
When to Use Component-Level Providers
If you need a fresh service instance per component (e.g., a form state service), register it in the component's providers array:
Code:
@Component({
selector: 'app-editor',
providers: [EditorStateService],
template: `...`
})
export class EditorComponent { }This ensures each EditorComponent gets its own EditorStateService instance, isolated from other components.
Best Practices
- Default to providedIn: 'root' for most services
- Use component-level providers only when you need instance isolation
- Avoid providing the same service at multiple levels unless intentional
- Use @Optional() and @SkipSelf() decorators to control injector resolution
Share your DI patterns and questions below!
Angular's dependency injection (DI) system is one of its most powerful features. Understanding how hierarchical injectors work is key to building scalable apps.
What is Hierarchical DI?
Angular creates an injector tree that mirrors the component tree. Each injector can provide its own instance of a service, or inherit from a parent injector. This gives you fine-grained control over service scope and lifetime.
providedIn Options
- providedIn: 'root' — Singleton across the entire app. Tree-shakable.
- providedIn: 'any' — Each lazy-loaded module gets its own instance.
- providedIn: 'platform' — Shared across multiple Angular apps on the same page.
When to Use Component-Level Providers
If you need a fresh service instance per component (e.g., a form state service), register it in the component's providers array:
Code:
@Component({
selector: 'app-editor',
providers: [EditorStateService],
template: `...`
})
export class EditorComponent { }This ensures each EditorComponent gets its own EditorStateService instance, isolated from other components.
Best Practices
- Default to providedIn: 'root' for most services
- Use component-level providers only when you need instance isolation
- Avoid providing the same service at multiple levels unless intentional
- Use @Optional() and @SkipSelf() decorators to control injector resolution
Share your DI patterns and questions below!
Recently Browsing
1 Guest(s)
1 Guest(s)
Recently Browsing
1 Guest(s)
1 Guest(s)