2026年版 Angular依存性注入の完全ガイド: プロバイダー、トークン、面接対策

import { InjectionToken, inject } from '@angular/core';

export interface AppConfig {
  apiUrl: string;
  featureFlags: {
    darkMode: boolean;
    betaFeatures: boolean;
  };
}

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
  providedIn: 'root',
  factory: () => ({
    apiUrl: 'https://api.example.com',
    featureFlags: {
      darkMode: true,
      betaFeatures: false,
    },
  }),
});

// コンポーネントでの使用
export class FeatureComponent {
  private config = inject(APP_CONFIG);

  get apiEndpoint(): string {
    return this.config.apiUrl;
  }
}

import { Injectable, inject } from '@angular/core';

@Injectable()
export class LoggerService {
  private prefix = 'DEFAULT';

  setPrefix(prefix: string): void {
    this.prefix = prefix;
  }

  log(message: string): void {
    console.log(`[${this.prefix}] ${message}`);
  }
}

// 親コンポーネント
@Component({
  selector: 'app-parent',
  providers: [LoggerService],
  template: `<app-child />`,
})
export class ParentComponent {
  private logger = inject(LoggerService);

  constructor() {
    this.logger.setPrefix('PARENT');
  }
}

// 子コンポーネント - 親のインスタンスを継承
@Component({
  selector: 'app-child',
  template: `<button (click)="logMessage()">Log</button>`,
})
export class ChildComponent {
  private logger = inject(LoggerService);

  logMessage(): void {
    this.logger.log('Message from child'); // [PARENT] Message from child
  }
}

import { Injectable } from '@angular/core';

export abstract class NotificationService {
  abstract send(message: string): void;
}

@Injectable()
export class EmailNotificationService extends NotificationService {
  send(message: string): void {
    console.log(`Email: ${message}`);
  }
}

@Injectable()
export class PushNotificationService extends NotificationService {
  send(message: string): void {
    console.log(`Push: ${message}`);
  }
}

// モジュールでの設定
@NgModule({
  providers: [
    {
      provide: NotificationService,
      useClass: environment.mobile
        ? PushNotificationService
        : EmailNotificationService,
    },
  ],
})
export class AppModule {}

import { InjectionToken, inject } from '@angular/core';

export const API_CLIENT = new InjectionToken<ApiClient>('api.client', {
  providedIn: 'root',
  factory: () => {
    const config = inject(APP_CONFIG);
    const http = inject(HttpClient);

    return new ApiClient(http, {
      baseUrl: config.apiUrl,
      timeout: 30000,
      retryAttempts: 3,
    });
  },
});

@NgModule({
  providers: [
    LoggerService,
    {
      provide: 'LEGACY_LOGGER',
      useExisting: LoggerService,
    },
  ],
})
export class CoreModule {}

// inject関数を使用したパターン
@Component({
  selector: 'app-modern',
  template: `...`,
})
export class ModernComponent {
  private userService = inject(UserService);
  private router = inject(Router);
  private config = inject(APP_CONFIG);

  // ロジックをすぐに記述可能
}

// コンストラクター注入パターン
@Component({
  selector: 'app-traditional',
  template: `...`,
})
export class TraditionalComponent {
  constructor(
    private userService: UserService,
    private router: Router,
    @Inject(APP_CONFIG) private config: AppConfig
  ) {}
}

import {
  EnvironmentInjector,
  createEnvironmentInjector,
  inject,
} from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PluginLoaderService {
  private parentInjector = inject(EnvironmentInjector);

  loadPlugin(pluginConfig: PluginConfig): EnvironmentInjector {
    return createEnvironmentInjector(
      [
        {
          provide: PLUGIN_CONFIG,
          useValue: pluginConfig,
        },
        PluginService,
      ],
      this.parentInjector
    );
  }
}

import { InjectionToken, inject } from '@angular/core';

export interface Validator {
  validate(value: unknown): boolean;
  errorMessage: string;
}

export const VALIDATORS = new InjectionToken<Validator[]>('validators');

// モジュールでの登録
@NgModule({
  providers: [
    {
      provide: VALIDATORS,
      useClass: RequiredValidator,
      multi: true,
    },
    {
      provide: VALIDATORS,
      useClass: EmailValidator,
      multi: true,
    },
    {
      provide: VALIDATORS,
      useClass: MinLengthValidator,
      multi: true,
    },
  ],
})
export class ValidationModule {}

// サービスでの利用
@Injectable({ providedIn: 'root' })
export class ValidationService {
  private validators = inject(VALIDATORS);

  validateAll(value: unknown): string[] {
    return this.validators
      .filter((v) => !v.validate(value))
      .map((v) => v.errorMessage);
  }
}

import { Injectable, Optional, Self, SkipSelf, inject } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `...`,
})
export class ExampleComponent {
  // 存在しない場合はnull
  private optionalService = inject(OptionalService, { optional: true });

  // 自身のインジェクターのみを検索
  private selfService = inject(SelfService, { self: true, optional: true });

  // 親のインジェクターから検索開始
  private parentService = inject(ParentService, { skipSelf: true });
}

import { forwardRef, Inject } from '@angular/core';

@Injectable()
export class ServiceA {
  constructor(
    @Inject(forwardRef(() => ServiceB))
    private serviceB: ServiceB
  ) {}
}

@Injectable()
export class ServiceB {
  constructor(private serviceA: ServiceA) {}
}