angular-di

Angular の依存性注入

バージョン： Angular 21（2025） タグ： DI、サービス、プロバイダー、トークン、inject()

参考資料： DI ガイド • API • inject()

API の変更点

このセクションでは、最近のバージョン固有の API の変更点について説明します。

• 新機能：inject() による関数形式の注入 — 最新の Angular では、コンストラクターによる注入より推奨されます 出典

• 新機能：Optional デコレーターを使った inject() — inject(Service, { optional: true })

• 新機能：SkipSelf を使った inject() — inject(Service, { skipSelf: true })

• 新機能：ツリーシェイキング可能な InjectionToken — new InjectionToken<T>(desc, { providedIn: 'root' })

ベストプラクティス

• シングルトンサービスには providedIn: 'root' を使用します

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) { console.log(message); }
}

• コードをすっきりさせるには inject() 関数を使用します

@Component({})
export class MyComponent {
  private service = inject(MyService);
  private router = inject(Router);
}

• クラス以外の依存関係には InjectionToken を使用します

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 }
]

• オプションの依存関係には @Optional を使用します

constructor(@Optional() private logger: LoggerService) {
  this.logger?.log('Optional dependency');
}

• 自己注入を避けるには @SkipSelf を使用します

constructor(@SkipSelf() @Optional() private parent: ParentService) {}

• 循環依存には forwardRef を使用します

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');

• 遅延読み込みされるサービスには providedIn: 'any' を使用します

@Injectable({ providedIn: 'any' })
export class LazyService {}