---
name: hoangnguyen0403-angular-dependency-injection
description: "Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers."
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "c0d94153-966a-4214-9d22-9a24f939183c"
  decimalai-version-id: "78e7bd42-54f1-4d32-bfbf-1f4a603275ab"
  decimalai-version: "1"
  decimalai-body-sha256: "94cbd0032c4657f41e444fa7ace3851b422095fb1aca84502016f341c04a8ad6"
  decimalai-name: "hoangnguyen0403/angular-dependency-injection"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/hoangnguyen0403-angular-dependency-injection@1/SKILL.md"
---
# 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<T>('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](references/di-patterns.md)

## 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)