Back to Skills

angular-di

Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.

589stars68forksUpdated 5/5/2026

Security Assessment

Safe(100/100)
Security Score100/100

About angular-di

The angular-di skill enables developers to implement robust dependency injection in Angular v20+ applications, providing a structured approach to managing service dependencies across different levels of an application. By leveraging Angular's `inject()` function, injection tokens, and provider configuration, this skill simplifies the process of creating, sharing, and controlling instances of services. It solves the common problem of tightly coupled components and services, allowing developers to write more modular, testable, and maintainable code. The skill emphasizes best practices for singleton and scoped services, making it easier to manage shared resources efficiently.

FAQ

How do I inject a service using this skill?

You can inject a service directly using the `inject()` function within your class or component, which allows immediate access to the service without relying on constructor injection.

Is this skill compatible with versions of Angular before v20?

This skill is specifically designed for Angular v20 and above. Some features, such as the enhanced `inject()` usage and provider configuration, may not work in earlier versions.

Can I create custom tokens for configuration values?

Yes, you can define custom injection tokens using `InjectionToken` and provide static values, objects, or factories to be injected wherever needed.

What are the different provider scopes available?

This skill supports root-level singletons, component-level instances, and route-level scoped providers, giving flexibility in how services are shared and instantiated.

Are there any limitations when using factory-based tokens?

Factory-based tokens can only be provided at the levels supported by Angular (typically root or module), and the factory function must return a compatible value. Complex asynchronous initialization may require additional handling.

All Files

2 files
SKILL.md7.9 KB
View
references/di-patterns.md11.5 KB
View

Install angular-di

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill