angular-di

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

Updated Feb 9, 2026
One-click install
npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-di-blotch-smart-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-di
Source: https://github.com/Blotch-Smart-Frames/Board/tree/main/packages/client/.claude/skills/angular-di
Command: npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-di-blotch-smart-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Configuring Angular dependency injection correctly—choosing provider scopes, creating injection tokens, and managing singleton versus component-level services—is error-prone without clear patterns, especially with the modern inject() API replacing constructor injection. ## Core Features & Use Cases - Modern inject() Patterns: Replace constructor injection with the inject() function in components and services, including optional, self, skipSelf, and host modifiers. - Injection Tokens & Provider Types: Create InjectionToken instances with factories and configure useClass, useValue, useFactory, useExisting, and multi providers. - Scoped Providers & App Initializers: Configure root, component, and route-level providers, plus provideAppInitializer for async startup logic and runInInjectionContext for programmatic injection. - Use Case: When building a feature that needs a platform-specific storage service, define an abstract Storage class, provide BrowserStorage or ServerStorage via a factory checking PLATFORM_ID, and inject it anywhere with inject(Storage). ## Quick Start Ask the AI to create an Angular service using inject() with an injection token for your API URL and configure it in app.config.ts providers.

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

Call inject() as a property initializer inside a component or service, such as private http = inject(HttpClient). It works in injection contexts like constructors, field initializers, and factory functions, and the injected value is available immediately.

How to create an injection token in Angular?▼

Create a token with new InjectionToken<Type>('description'), optionally adding providedIn and a factory for self-providing tokens. Provide values with { provide: TOKEN, useValue: ... } in app.config.ts and consume them via inject(TOKEN).

What is the difference between providers and viewProviders in Angular?▼

providers makes services available to the component and both its view and content children, while viewProviders restricts access to the component and its view children only. Content children projected via ng-content cannot access viewProviders.

Does Angular inject() work outside a constructor?▼

inject() only works within an injection context such as field initializers, constructors, or factory functions. To use it elsewhere, wrap the call with runInInjectionContext using an EnvironmentInjector, or pass DestroyRef explicitly to utilities like takeUntilDestroyed.

How do I mock services for Angular unit tests with TestBed?▼

Create a spy object with jasmine.createSpyObj and override the provider in TestBed.configureTestingModule using { provide: ServiceName, useValue: spy }. You can also use TestBed.overrideProvider to replace injection token values per test suite.