angular-di

Implements Angular dependency injection using inject() API, tokens, and provider hierarchies.

5|1|Updated Jul 25, 2023
One-click install
npx skills add https://github.com/xocomil/fullstack-dinos --skill angular-di-xocomil
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-di
Source: https://github.com/xocomil/fullstack-dinos/tree/main/.agent/skills/angular-di
Command: npx skills add https://github.com/xocomil/fullstack-dinos --skill angular-di-xocomil

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular DI can be verbose and constructor-heavy; this skill guides teams toward using the inject() API, tokens, and scoped providers to simplify and centralize dependency management across large apps.

Core Features & Use Cases

  • Inject() API over constructors for concise dependencies and easier testing.
  • Token-based provisioning with InjectionToken and provided tokens to decouple implementations.
  • Hierarchical and scoped providers to control singleton vs per-component lifecycles, route, and view scopes.
  • Advanced patterns including EnvironmentInjector and runInInjectionContext for dynamic injection contexts.
  • Patterns and testing guidance with multi providers, token mocks, and DI assertions.

Quick Start

Try using inject() to obtain HttpClient in a component and configure a root provider for a shared API service.

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() API instead of constructor injection in Angular?

Angular dependency injection with the inject() API replaces constructor parameters by obtaining dependencies inside property initializers. This approach simplifies dependencies, centralizes provider management, and makes unit testing easier by removing verbose constructor signatures.

When should I use InjectionToken for providers in Angular?

Angular InjectionToken providers are used to decouple interface implementations from concrete classes. You should use token-based provisioning when configuring shared services or environment variables across large apps, allowing flexible implementation swapping without modifying consumer components.

What is the difference between singleton and scoped providers in Angular DI?

Singleton providers share a single instance across the entire application, while scoped providers create per-component or per-route lifecycles. Angular hierarchical injection controls these scopes by configuring providers at root, component, or route levels to manage state isolation appropriately.

How does EnvironmentInjector work for dynamic injection contexts in Angular?

EnvironmentInjector enables advanced dependency injection patterns by establishing dynamic injection contexts. You use runInjectionContext to execute functions within a specific injector scope, allowing runtime creation of providers and components outside standard static configurations.

Can I use multi providers and token mocks for Angular DI testing?

Yes, Angular DI testing supports multi providers and token mocks to verify dependency injection configurations. You can assert provider overrides, simulate token-based dependencies, and test scoped provider lifecycles to ensure components receive correct service instances.

How do I configure route-level providers in Angular dependency injection?

Angular dependency injection allows route-level providers by configuring scoped providers within route definitions. This leverages the hierarchical injector to create isolated service instances per route, controlling singleton versus per-component lifecycles without polluting the root environment injector.