angular-building

[Angular] 解決 NullInjectorError No provider for XXXXService!

分享

開發 Angular 程式時,會從 component 依賴注入( Dependency injection )service,所以會在 service 上加個裝飾器(decorator)@Injectable() 在 class 上,再從 component import 進來並於 constructor 指定 service 並對應 type。

這時在 component 與 service 上都沒有出現錯誤,但啟動時卻發生了下列錯誤 No provider for TodosService!

使用版本:Angular 12.1.1

header.component.ts

import { Component } from "@angular/core";
import { TodosService } from "../../services/todos.service";

@Component({
  selector: 'app-todos-header',
  templateUrl: './header.component.html',
})

export class HeaderCompnent {
  constructor(private todoService: TodosService){
    this.todoService.todos$.subscribe(todos => {
      console.log('todos',todos);
    });
  }
}

可以看得出我在 header.component.ts 裡

  1. import TodosService
  2. 於 constructor 注入該服務

todos.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { TodoInterface } from "../types/todo.interface";

@Injectable()
export class TodosService {
//裡面都不是重點...
}

可以看得出我在 todos.service.ts 裡

  1. import Injectable 從 Angular Core 裡
  2. 於 Class 綁定 @Injectable()

一切看起來很安好,component 與 service 兩個 ts 檔裡面也沒有出現錯誤。

出現 No provider for TodosService!

run 起來卻出現下圖,NullInjectorError 後來發現因為 module 裡面也要宣告 service 才可以使用。

解決方法:於 modules 的 @NgModule 裡加上 providers

由於我的 component 宣告在 todos.module.ts 裡,所以要於該 @NgModule 加上 todos.service.ts。

在 modules 的 providers 引入即可。

providers 在此 modules 宣告後,其之下的元件都可以使用此服務。

@NgModule({
  declarations: [TodosCompnent, HeaderCompnent],
  imports: [RouterModule.forChild(routes)],
  providers: [TodosService],
})
分享
Scroll to Top