Angular Dependency Injection

Dependency Injection

Priority: P0 (CRITICAL)

Principles

• inject() over Constructor: Use inject(MyService) function in class fields or constructor-equivalent class positions for cleaner injection. It works in any injection context (class fields, factory functions, guards).
• Tree Shaking: Always use @Injectable({ providedIn: 'root' }) for app-wide singletons unless specific scoping required.
• Tokens: Use new InjectionToken('description') for configuration, primitives, or interface abstraction. Provide via: { provide: API_URL, useValue: 'https://api.example.com' } in app.config.ts. Inject with: inject(API_URL).

Guidelines

• Providers: Prefer provide*() functions (e.g., provideHttpClient()) in app.config.ts providers array over importing NgModules.
• Factories: Use useFactory strictly when dependencies need runtime configuration.
• App Initializer: Use provideAppInitializer(() => inject(ConfigService).load()) (Angular 19+) to run async code before app bootstrap — replaces old APP_INITIALIZER token pattern.
• Route Providers: Scope services to route tree using providers: [MyService] in route config ( routes array) instead of providedIn: 'root'. This creates instance destroyed when leaving route.
• Multi Providers: Use { provide: TOKEN, useClass: Impl, multi: true } to collects all multi providers into array (e.g., HTTP_INTERCEPTORS, validators).

Anti-Patterns

• No providedIn: 'platform': Use 'root' scoping; reserve platform only for Micro Frontend sharing.
• No forwardRef: Refactor architecture to eliminate circular dependencies instead.

References

• DI Patterns

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• HTTP_INTERCEPTORS

• before app bootstrap

• class fields or constructor-equivalent

• collects all multi providers

• inject(MyService)

• provideHttpClient()

• providers: [MyService]

• route config

• Additional task-grounded exact anchors: inject(API_URL)