Skip to content
Development
Skill

/angular-dependency-injection

Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers.

From plugin
agent-skills-standard
538200 skills1 MCP
Install
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill angular-dependency-injection --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/angular-dependency-injection

Context preview

The summary Claude sees to decide when to auto-load this skill.

Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers.

SKILL.md

angular-dependency-injection.SKILL.md
name: angular-dependency-injection
description: Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers.
metadata:
  triggers:
    files:
    - '**/*.service.ts'
    keywords:
    - angular inject
    - providedIn
    - injection token
    - provideAppInitializer

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)
Read more
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin

Other skills on agent-skills-standard.