AngularでCan't resolve all parameters for のエラー。Interfaceが使えない？Angularのバグ？

Question

実現したいこと

Angularのとあるクラスにて、同一インターフェースを実装した複数の実装クラスを引数として受け取れるようにしたいと思っています。もう少し具体的な所で言うとDAOが使うデータアクセスサービスを、HTTP経由のAPI形式やデータベースへの直接接続など、提供される形式に応じて入れ替えられるドライバークラスを実装しようとしています。

発生している問題

Chromeのデベロッパー ツール上のコンソールで以下のエラーが出てます。

compiler.js:485 Uncaught Error: Can't resolve all parameters for dao: (?).

 at syntaxError (compiler.js:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15662)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15497)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15477)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15837)
    at eval (compiler.js:15748)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15708)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15276)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:15114)

該当のソースコード

• driver.ts

インターフェースの宣言

export interface Driver {
}

• dao.ts

daoは引数にインターフェースでdriverを実装した実装クラスを受取る.

import { Injectable } from '@angular/core';
import { Driver } from './driver';

@Injectable()
export class dao {
	constructor(private accesor: Driver)
	{　　/* 初期化処理 */ }
}

• webapidriver.ts

driverインターフェースの実装クラス

import { Injectable } from '@angular/core';
import { Driver } from './driver';

@Injectable()
export class WebAPIDriver implements Driver {
	constructor() {}
}

• service.ts

daoにdriverインターフェースを実装したWebAPIDriverをセット

import { Injectable } from '@angular/core';
import { WebAPIDriver } from './webapidriver';
import { DAO } from './dao';

@Injectable()
export class service{

    constructor() {
    /* WebAPIDriverはdirverインターフェースを実装 */
        var dao = new DAO(new WebAPIDriver());
    }
}

試したこと

• Issuesを参考にpolyfills.tsの以下の行をコメントアウトしてみたが、エラーは同じで発生場所が変わっただけでした。

  import 'core-js/es7/reflect';

• この記事でインスタンス生成時に、コンストラクタ引数に何渡せば良いかわらなくなってるという事でdaoのコンストラクタにInjectデコレータを付けてみました。あたりまえですが、WebAPIDriverを指定したら普通に動作しました。（やりたい事は出来てませんが）

import { Injectable, Inject } from '@angular/core';
                    //↑付け足す
import { Driver } from './driver';
import { WebAPIDriver } from './WebAPIdriver';
// ↑ 付け足す

export class dao {
	constructor(
		@Inject(WebAPIDriver) private accesor: Driver
             //↑付け足す
	)
	{　　/* 初期化処理 */ }
}

• この記事とこの記事で循環参照？（or circular imports）の問題とあったのでとりあえず分散してたファイルを一箇所に集約してservice.ts内に全てのコードを集約してみましたがこれも駄目でした。ま～当たり前かもしれないですが。。

Answer 1

TypeScriptのインターフェースはコンパイル時に消える情報ですので、JavaScript上に残らず、DIのトークンとしては使えません。ですので、

@Injectable()
export class dao {
    constructor(private accesor: Driver)
    {　　/* 初期化処理 */ }
}

というコンストラクタは@Injectableが適用できません。

このような場合は引数の型ではなくInjectionTokenを使うのが一般的です。

// InjectionTokenの宣言
export const DRIVER = new InjectionToken<Driver>('driver');

@NgModule({
  // ...
  providers: [
    // InjectionTokenに対して実体クラスを割り当てる
    { provide: DRIVER, useClass: WebAPIDriver },
  ]
})
export class AppModule {}

@Injectable({ providedIn: 'root' })
export class dao {
    // DRIVERをトークンとしてDriver型の引数をとる
    constructor(@Inject(DRIVER) private accesor: Driver)
    {　　/* 初期化処理 */ }
}