錯誤百科

無效的注入權杖

當 Angular 在依賴注入期間無法解析某個類別的依賴時,就會發生這個錯誤。這最常影響使用建構函式注入的類別,因為 Angular 仰賴 TypeScript 中繼資料來判斷參數型別。

最常見的原因如下:

  1. 服務類別缺少 @Service() 或 @Injectable 裝飾器
  2. InjectionToken 缺少適當的 provider 定義
  3. 某個建構函式參數無法解析

NOTE: inject() 函式接受明確的權杖,因此「參數無法解析」的情境不會直接套用到它身上。不過,如果被注入的類別本身缺少 @Service(),而且它自己也有建構函式依賴,這個錯誤仍然可能發生。

常見情境

缺少 @Service() 裝飾器

當類別具有建構函式依賴,卻缺少 @Service() 裝飾器時,Angular 無法解析它的參數:

Missing @Service() decorator

export class UserClient {
  constructor(private http: HttpClient) {} // Angular can't resolve this
}

加上 @Service() 裝飾器即可修復這個問題:

@Service()
export class UserClient {
  constructor(private http: HttpClient) {}
}

無法解析的建構函式參數

當 Angular 無法判斷某個建構函式參數的型別時,也會出現這個錯誤:

@Service()
export class DataStore {
  // Angular can't resolve 'config' without a provider
  constructor(private config: AppConfig) {}
}

請確保所有建構函式參數都已設定 provider,或針對選擇性依賴使用 @Optional()。

如何除錯

錯誤訊息會包含無法解析的那個權杖的詳細資訊:

  • Can't resolve all parameters for X: (?, ?, ?)——其中的 ? 標記代表無法解析的參數。請確認該類別具有 @Service 或 @Injectable(),而且所有依賴都有 provider。
  • Token X is missing a ɵprov definition——使用了某個 InjectionToken,卻沒有為它設定 provider。請使用 {provide: TOKEN, useValue: ...} 為該權杖註冊一個值,或在權杖定義中加入預設 factory。

從錯誤的堆疊追蹤往回追蹤,找出有問題的注入發生在哪裡,接著確認下列事項:

  1. 該類別具有 @Service 或 @Injectable() 裝飾器
  2. 所有建構函式參數都已註冊 provider
  3. 任何 InjectionToken 都已設定 provider 或預設值