angular-di

Configure Angular dependency injection with inject(), tokens, and providers.

595|69|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/analogjs/angular-skills --skill angular-di-analogjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-di
Source: https://github.com/analogjs/angular-skills/tree/main/skills/angular-di
Command: npx skills add https://github.com/analogjs/angular-skills --skill angular-di-analogjs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular DI can become complex as apps scale. This Skill teaches using inject(), injection tokens, and providers to design flexible, testable architectures.

Core Features & Use Cases

  • Use inject() for dependency retrieval in components, services, and functional code.
  • Create and configure InjectionTokens to represent runtime-configurable dependencies.
  • Leverage provider scopes (root, component, route) and hierarchical DI patterns for modular apps.
  • Apply multi providers and advanced patterns like environment injectors and optional injections.

Quick Start

Install Angular and import DI APIs. Create a token and provide at the desired scope, then inject using inject(Token) in a class. Example: create an API_URL InjectionToken and provide { provide: API_URL, useValue: 'https://api.example.com' } at root, then private apiUrl = inject(API_URL);

Frequently Asked Questions about angular-di

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use inject() to retrieve dependencies in Angular services?

Use the inject() function to retrieve Angular dependencies directly in class properties or functional code. It replaces constructor-based injection, offering a flexible way to access injectables in components and services.

How do I create and configure InjectionTokens for runtime dependencies?

Create an InjectionToken to represent runtime-configurable dependencies, then configure providers using useValue or useFactory. This decouples interface implementation from the token definition.

What's the best way to manage provider scopes in hierarchical Angular DI?

Manage provider scopes by configuring injectables at root, component, or route levels. Hierarchical DI patterns allow modular apps to share or isolate service instances across different injector trees.

Can I use optional, self, and skipSelf DI options with inject()?

Yes, apply DI options like optional, self, skipSelf, and host directly within the inject() call. These options control dependency resolution behavior for complex service architectures.

Does Angular v20+ support multi-providers and environment injectors?

Yes, Angular v20+ supports multi-providers for registering multiple values to a single token. Environment injectors further enable advanced dependency injection patterns outside standard component hierarchies.