Angular: NullInjectorError - No provider for Service の原因と解決策

概要

Angularで依存性注入（DI）を使用する際に、必要なサービスのプロバイダーが登録されていない場合に発生するエラーです。

エラーメッセージ

NullInjectorError: R3InjectorError(AppModule)[UserService -> UserService]:
  NullInjectorError: No provider for UserService!

原因

@Injectable デコレータがない: サービスクラスに@Injectableが付いていない
providedIn が設定されていない: サービスがどこにも提供されていない
モジュールのproviders配列に追加されていない: 手動登録が必要な場合
遅延ロードモジュールの問題: 別モジュールのサービスにアクセスできない

解決策

1. @Injectable with providedIn: ‘root’

1
2
3
4
5
6
7
8
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'  // アプリ全体でシングルトン
})
export class UserService {
  // ...
}

2. モジュールのprovidersに追加

1
2
3
4
5
6
7
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [UserService],  // ここに追加
  bootstrap: [AppComponent]
})
export class AppModule { }

3. コンポーネントレベルで提供

1
2
3
4
5
6
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  providers: [UserService]  // コンポーネントごとのインスタンス
})
export class UserComponent { }

4. 遅延ロードモジュールでの提供

1
2
3
4
5
6
@NgModule({
  imports: [CommonModule],
  declarations: [FeatureComponent],
  providers: [FeatureService]  // このモジュール内でのみ有効
})
export class FeatureModule { }

5. 依存関係の注入を確認

1
2
3
4
5
6
7
8
9
@Injectable({
  providedIn: 'root'
})
export class OrderService {
  constructor(
    private userService: UserService,  // UserServiceも登録が必要
    private http: HttpClient           // HttpClientModuleのインポートが必要
  ) { }
}

よくある間違い

HttpClientを使用しているがHttpClientModuleをインポートしていない
RouterをインジェクトしているがRouterModuleがない
循環依存によるエラー
スタンドアロンコンポーネントでの提供方法の違い

概要

エラーメッセージ

原因

解決策

1. @Injectable with providedIn: ‘root’

2. モジュールのprovidersに追加

3. コンポーネントレベルで提供

4. 遅延ロードモジュールでの提供

5. 依存関係の注入を確認

よくある間違い

Angular の他のエラー