Loading...
Loading...
ALWAYS use when working with Angular Dependency Injection, providers, services, inject tokens, or hierarchical injection in Angular applications.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-diinject(Service, { optional: true })inject(Service, { skipSelf: true })new InjectionToken<T>(desc, { providedIn: 'root' })@Injectable({ providedIn: 'root' })
export class LoggerService {
log(message: string) { console.log(message); }
}@Component({})
export class MyComponent {
private service = inject(MyService);
private router = inject(Router);
}export const API_URL = new InjectionToken<string>('apiUrl');
providers: [
{ provide: API_URL, useValue: 'https://api.example.com' }
]
constructor(@Inject(API_URL) private apiUrl: string) {}providers: [
{
provide: AuthService,
useFactory: (http: HttpClient, config: AppConfig) => {
return new AuthService(http, config.apiUrl);
},
deps: [HttpClient, APP_CONFIG]
}
]providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LogInterceptor, multi: true }
]constructor(@Optional() private logger: LoggerService) {
this.logger?.log('Optional dependency');
}constructor(@SkipSelf() @Optional() private parent: ParentService) {}constructor(@Inject(forwardRef(() => ParentService)) private parent: ParentService) {}// Component-level provider
@Component({
providers: [MyService]
})
export class MyComponent {}
// Lazy-loaded module provider
@Injectable({ providedIn: MyModule })
export class MyService {}export interface CacheInterface {
get(key: string): any;
}
export const CACHE_TOKEN = new InjectionToken<CacheInterface>('cache');@Injectable({ providedIn: 'any' })
export class LazyService {}