angular-di

Document Angular v20+ dependency injection with inject(), tokens, and provider scopes.

1|Updated Jul 5, 2025

Search Tags:#angular #providers #dependency-injection #inject #di-patterns #injection-tokens

Ready to run

npx skills add https://github.com/kevinchatham/tressi --skill angular-di-kevinchatham

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular DI can become complex; this Skill clarifies how to use inject(), tokens, and providers to manage dependencies across scopes.

Core Features & Use Cases

Inject dependencies with inject() in components and services.
Create and provide InjectionTokens to decouple implementations.
Manage provider scopes (root, component, route) for singleton vs per-instance services.
Illustrate hierarchical injection and testing patterns.

Quick Start

Create a small Angular example that uses inject() to retrieve services and show provider scope across components.

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 Angular dependencies in services?▼

You use inject() to retrieve Angular dependencies by calling it within component or service properties instead of constructor parameters. This approach simplifies wiring dependencies and clarifies provider scopes across your application.

What is the best way to configure Angular providers for singleton vs per-instance services?▼

The best way to configure Angular providers is by managing their scopes across root, component, and route levels. Setting providedIn: root creates a singleton, while configuring component or route providers generates per-instance services for hierarchical injection.

How do I create InjectionTokens to decouple implementations in Angular?▼

You create InjectionTokens to decouple implementations by defining abstract interfaces and providing concrete classes for them. This pattern allows you to manage multiple provider configurations and swap dependencies seamlessly without modifying the consuming components.

Does Angular dependency injection support hierarchical injection across route scopes?▼

Yes, Angular dependency injection supports hierarchical injection across route scopes. You can configure providers at the root, component, or route level to manage singleton versus per-instance services and establish complex testing patterns throughout your application.

Why use inject() instead of constructor parameters for Angular dependency injection?▼

Using inject() instead of constructor parameters prevents inheritance issues and simplifies testing patterns. It allows you to retrieve services directly within properties, making your Angular components and services cleaner and easier to wire across varying provider scopes.