Skip to content
Back to skills

Angular Dependency Injection

ASecurity

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

  • 549 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added June 6, 2026
developmentangularapifrontend

Works with

  • cli
  • api

Security analysis

A100/100

Pro scans all 3 files and shows the line behind each finding

Scanned June 6, 2026

npx -y skills add HoangNguyen0403/agent-skills-standard --skill angular-dependency-injection --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Angular Dependency Injection?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Angular Dependency Injection
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/hoangnguyen0403-angular-dependency-injection/badge)](https://www.skillsdirectory.com/skills/hoangnguyen0403-angular-dependency-injection)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
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)

Files in this skill

  • SKILL.md2.1 KB
  • evals/evals.json4 KB
  • references/di-patterns.md674 B

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.