with one click
angular-dependency-injection
// Use when building modular Angular applications requiring dependency injection with providers, injectors, and services.
// Use when building modular Angular applications requiring dependency injection with providers, injectors, and services.
Use when handling async operations in Angular applications with observables, operators, and subjects.
Use when building Angular 16+ applications requiring fine-grained reactive state management and zone-less change detection.
Guides end-to-end feature development through 8 phases: discover requirements, explore codebase patterns, clarify ambiguities with the user, design architecture, implement with TDD, run multi-agent code review, validate all quality gates, and write a blog post. Use when asked to add a feature, implement a new capability, build functionality, or develop a feature end-to-end.
Use when creating or modifying Han plugins. Covers plugin structure, configuration, hooks, skills, and best practices.
Minimize token consumption through efficient tool usage patterns
Prefer explicit configuration over framework defaults to prevent environment-dependent failures
| name | angular-dependency-injection |
| user-invocable | false |
| description | Use when building modular Angular applications requiring dependency injection with providers, injectors, and services. |
| allowed-tools | ["Bash","Read"] |
Master Angular's dependency injection system for building modular, testable applications with proper service architecture.
Angular's DI uses the inject() function (Angular 14+) as the preferred
injection mechanism — no constructor parameters needed:
import { Injectable, inject } from '@angular/core';
// Service injectable at root level
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [];
getUsers(): User[] {
return this.users;
}
addUser(user: User): void {
this.users.push(user);
}
}
// Standalone component injection via inject()
import { Component } from '@angular/core';
@Component({
selector: 'app-user-list',
standalone: true,
template: `
@for (user of users; track user.id) {
<div>{{ user.name }}</div>
}
`
})
export class UserListComponent {
private readonly userService = inject(UserService);
users = this.userService.getUsers();
}
import { Injectable, Provider, Component, inject } from '@angular/core';
// Interface
interface Logger {
log(message: string): void;
}
// Implementations
@Injectable()
export class ConsoleLogger implements Logger {
log(message: string): void {
console.log(message);
}
}
@Injectable()
export class FileLogger implements Logger {
log(message: string): void {
// Write to file
}
}
// Provider configuration
const loggerProvider: Provider = {
provide: Logger,
useClass: ConsoleLogger
};
// Standalone component — providers go here, not in NgModule
@Component({
selector: 'app-my-component',
standalone: true,
providers: [loggerProvider],
template: `...`
})
export class MyComponent {
private readonly logger = inject(Logger);
constructor() {
this.logger.log('Component initialized');
}
}
import { InjectionToken, Component, inject } from '@angular/core';
// Configuration object
export interface AppConfig {
apiUrl: string;
timeout: number;
retries: number;
}
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
// Provider
const configProvider = {
provide: APP_CONFIG,
useValue: {
apiUrl: 'https://api.example.com',
timeout: 5000,
retries: 3
}
};
// bootstrapApplication (standalone)
bootstrapApplication(AppComponent, {
providers: [configProvider]
});
// Usage via inject()
export class ApiService {
private readonly config = inject(APP_CONFIG);
constructor() {
console.log(this.config.apiUrl);
}
}
import { Injectable, InjectionToken, inject } from '@angular/core';
export const API_URL = new InjectionToken<string>('api.url');
// Use inject() inside the factory — no deps array needed
const apiUrlProvider = {
provide: API_URL,
useFactory: () => {
const config = inject(AppConfig);
return config.production
? 'https://api.prod.example.com'
: 'https://api.dev.example.com';
}
};
// Complex factory — all deps resolved via inject()
const httpClientProvider = {
provide: HttpClient,
useFactory: () => {
const handler = inject(HttpHandler);
const logger = inject(Logger);
logger.log('Creating HTTP client');
return new HttpClient(handler);
}
};
import { Injectable, inject } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NewLogger {
log(message: string): void {
console.log('[NEW]', message);
}
}
// Alias an abstract token to the concrete implementation
export abstract class Logger {
abstract log(message: string): void;
}
const loggerAlias: Provider = {
provide: Logger,
useExisting: NewLogger
};
// Usage
export class MyComponent {
private readonly logger = inject(Logger);
constructor() {
this.logger.log('Using aliased logger');
}
}
import { InjectionToken, inject } from '@angular/core';
// Primitive token
export const MAX_RETRIES = new InjectionToken<number>('max.retries', {
providedIn: 'root',
factory: () => 3 // Default value
});
// Object token
export interface FeatureFlags {
enableNewUI: boolean;
enableBeta: boolean;
}
export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>(
'feature.flags',
{
providedIn: 'root',
factory: () => ({
enableNewUI: false,
enableBeta: false
})
}
);
// Usage via inject()
@Injectable()
export class ApiService {
private readonly maxRetries = inject(MAX_RETRIES);
private readonly flags = inject(FEATURE_FLAGS);
}
// Singleton across entire app
@Injectable({
providedIn: 'root'
})
export class GlobalService {
private state = {};
}
@Injectable()
export class ComponentService {
private data = [];
}
@Component({
selector: 'app-my-component',
standalone: true,
template: '...',
providers: [ComponentService] // New instance per component
})
export class MyComponent {
private readonly service = inject(ComponentService);
}
// Each component instance gets its own service instance
@Directive({
selector: '[appHighlight]',
standalone: true,
providers: [DirectiveService]
})
export class HighlightDirective {
private readonly service = inject(DirectiveService);
}
// Root - singleton across entire app
@Injectable({
providedIn: 'root'
})
export class RootService {}
// Platform - shared across multiple apps
@Injectable({
providedIn: 'platform'
})
export class PlatformService {}
Use inject() options instead of @Optional, @Self, @SkipSelf, @Host:
import { inject } from '@angular/core';
export class MyService {
// @Optional() equivalent
private readonly logger = inject(Logger, { optional: true });
// @Self() equivalent — only from this component's injector
private readonly local = inject(LocalService, { self: true });
// @SkipSelf() equivalent — skip this injector, look up the tree
private readonly parent = inject(SharedService, { skipSelf: true });
// @Host() equivalent — stop at host element
private readonly host = inject(ParentComponent, { host: true });
// Combine options
readonly #dep = inject(Dep, {
optional: true,
self: true,
});
constructor() {
this.logger?.log('Service created');
}
}
Use makeEnvironmentProviders and provideX() functions instead of
NgModule.forRoot() / NgModule.forChild():
import { makeEnvironmentProviders, EnvironmentProviders } from '@angular/core';
export interface SharedConfig {
apiUrl: string;
}
export const SHARED_CONFIG = new InjectionToken<SharedConfig>('shared.config');
// Replace forRoot() with a provideX() function
export function provideShared(config: SharedConfig): EnvironmentProviders {
return makeEnvironmentProviders([
SharedService,
{
provide: SHARED_CONFIG,
useValue: config
}
]);
}
// In bootstrapApplication (app root)
bootstrapApplication(AppComponent, {
providers: [
provideShared({ apiUrl: 'https://api.example.com' }),
provideRouter(routes),
provideHttpClient()
]
});
// In lazy-loaded routes — child-scope providers
export const routes: Routes = [
{
path: 'feature',
loadComponent: () => import('./feature.component'),
providers: [FeatureScopedService]
}
];
import { InjectionToken, inject } from '@angular/core';
export const HTTP_INTERCEPTORS =
new InjectionToken<HttpInterceptor[]>('http.interceptors');
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
return next.handle(req);
}
}
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
return next.handle(req);
}
}
// Register as multi-providers
const providers: Provider[] = [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: LoggingInterceptor,
multi: true
}
];
// Inject as array
export class HttpService {
private readonly interceptors = inject(HTTP_INTERCEPTORS);
}
// Tree-shakable (preferred) — service is removed if never injected
@Injectable({
providedIn: 'root'
})
export class NewService {}
import { TestBed } from '@angular/core/testing';
describe('MyComponent', () => {
let mockUserService: jasmine.SpyObj<UserService>;
beforeEach(() => {
mockUserService = jasmine.createSpyObj('UserService', ['getUsers']);
TestBed.configureTestingModule({
imports: [MyComponent], // standalone component
providers: [
{ provide: UserService, useValue: mockUserService }
]
});
});
it('should get users', () => {
mockUserService.getUsers.and.returnValue([]);
const fixture = TestBed.createComponent(MyComponent);
// Test component with mock
});
});
import { TestBed } from '@angular/core/testing';
describe('UserService', () => {
let service: UserService;
let httpMock: jasmine.SpyObj<HttpClient>;
beforeEach(() => {
httpMock = jasmine.createSpyObj('HttpClient', ['get', 'post']);
TestBed.configureTestingModule({
providers: [
UserService,
{ provide: HttpClient, useValue: httpMock }
]
});
service = TestBed.inject(UserService);
});
it('should fetch users', () => {
httpMock.get.and.returnValue(of([]));
service.getUsers().subscribe();
expect(httpMock.get).toHaveBeenCalled();
});
});
Use angular-dependency-injection when building modern, production-ready applications that require:
inject() — Cleaner than constructor injection, works in class fieldsprovidedIn: 'root' — Tree-shakable and singleton@Component, not @NgModuleprovideX() functions — Replaces forRoot()/forChild()inject() in factories — No deps array neededinject() options — Replaces @Optional, @Self, @SkipSelf, @Host