angular-di

Implement dependency injection in Angular v20+ with inject(), tokens, and hierarchical providers.

Updated Aug 23, 2026

Search Tags:#typescript #angular #dependency injection #tokens #services #providers

Ready to run

npx skills add https://github.com/rensjaspers/agents --skill angular-di-rensjaspers

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-di
Source: https://github.com/rensjaspers/agents/tree/main/skills/angular-di
Command: npx skills add https://github.com/rensjaspers/agents --skill angular-di-rensjaspers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies and clarifies the implementation of dependency injection (DI) in Angular applications, ensuring services and dependencies are managed efficiently and correctly across different scopes.

Core Features & Use Cases

Modern DI Practices: Demonstrates the use of inject(), injection tokens, and various provider configurations for Angular v20+.
Scoped Dependencies: Explains how to provide services at root, component, and route levels.
Advanced Patterns: Covers useClass, useValue, useFactory, useExisting, optional injection, and multi-providers.
Use Case: When building a new Angular service, understand how to correctly provide it at the root level for singleton access, or how to inject it into a specific component that needs it.

Quick Start

Use the angular-di skill to demonstrate how to inject the HttpClient service into an Angular component.

Frequently Asked Questions about angular-di

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

FAQPage Schema

How do I use the inject() function for Angular dependency injection?▼

Angular dependency injection using the `inject()` function replaces constructor-based injection, allowing services and dependencies to be managed efficiently within component or route scopes. It supports modern patterns like injection tokens and hierarchical providers.

What is the difference between useClass, useValue, and useFactory providers in Angular?▼

Angular providers define dependency injection configurations: `useClass` instantiates a service class, `useValue` supplies a static object, and `useFactory` dynamically creates dependencies based on runtime conditions. They map to injection tokens for hierarchical provider resolution.

How do I scope Angular services to root, component, or route levels?▼

Angular service scoping determines dependency injection lifecycle availability. Root-level providers create singletons, component-level providers restrict dependencies to specific components, and route-level providers manage hierarchical injectors for specific routes.

When should I use Injection Tokens and multi-providers in Angular?▼

Injection Tokens provide type-safe dependency injection for non-class values. Multi-providers allow multiple dependencies to be injected into a single token array, commonly used for app initializers or extending Angular configurations with multiple strategies.

Does Angular dependency injection support dynamic contexts with runInInjectionContext?▼

Angular dependency injection supports dynamic scenarios using `runInInjectionContext` and environment injectors. These advanced patterns allow dependencies to be injected programmatically outside standard component constructors while maintaining hierarchical resolution.