Angular の Service の依存関係について

Angular の Service を使うとき、インスタンスを分けるために useClass を使用したり、依存オブジェクトを作るために useFactory を使ったりします。
その時、コンストラクタの引数の中身が不正になりよくハマります。
プロバイダーで依存関係を設定したときには引数の順序に気を付けなければいけないです。

providersdeps を設定した時は注意

providers にプロバイダーを定義するとき、deps にオブジェクトの配列を置くと依存関係を指定できます。

@NgModule({
  ...
  providers: [
    {
      provide: SomeService,
      useClass: SomeService,
      deps: [ApiService, DataService]
    }
  ]
  ...
})

この時、SomeServiceApiSerivceDataService に依存していることになるので、SomeService のコンストラクタは以下のようになります。

@Injectable()
export class SomeService {
  constructor(
    private apiSerivce: ApiSerivce,
    private dataService: DataService,
    ) {
  }
  ...
}

この SomeService の開発中に ApiSerivce を使わなくなったとします。
その時、何も考えずコメントアウトなどしてしまうと deps の設定と相違が出てしまいます。

@Injectable()
export class SomeService {
  constructor(
    // private apiSerivce: ApiSerivce,
    private dataService: DataService,
    ) {
  }
  ...
}

SomeService のコンストラクタの引数には providers で設定した deps の順番で依存するインスタンスが割り当てられます。 そのため、このままだと SomeService のコンストラクタで宣言している dataSerevice の中には ApiService のインスタンスが入ってしまいます。

実際に SomeServiceApiService を使わないとなった場合には、deps の中身も変更する必要があります。

@NgModule({
  ...
  providers: [
    {
      provide: SomeService,
      useClass: SomeService,
      deps: [/* ApiService, */ DataService]
    }
  ]
  ...
})

あとがき

providers に依存関係を書いたことを忘れないようにしたい。

unimoku

Web サイトの制作、運営とアプリケーションのフロントエンド開発などをやっています。主に使うのはTypeScript、JavaScript、PHP、C/C++。特にTypeScriptが好きです。