角2依存性注入 - 一部のコンポーネントでサービスが注入されているが、すべてではない

Question

私は、ブートストラップでプロバイダとして登録された複数のサービスを持つモジュールが1つしかないAngular 2アプリケーションに取り組んでいます。アプリケーションには、これらのサービスを使用している同じモジュール内の複数のコンポーネントもあります。

すべてのコンポーネントがDIを使用してサービスを受け取ります（サービスはconstrutorのパラメータとして宣言されています）。

私が直面している問題は、同じサービスがいくつかのコンポーネントに正しく注入されていることです。

注入が失敗し、サービスインスタンスがInjectorオブジェクト内にあるコンポーネントのInjectorオブジェクトを確認しました。それが失敗するのはInjector.get（）メソッドで検索することです。パラメータとして提供されるトークンは、Injector辞書に格納されたトークンとは異なります。なぜ私はサービスのクラス名を使用しているので、このクラス名からJavascriptエンジンによってトークンが自動的に生成されるため、私はその理由を知ることができません。

Injector.get（）メソッドが呼び出されたときに同じ不透明なトークンを使用していても、注入を制御するためにOpaqueTokensを使用しようとしましたが、引数で指定されたトークンは、インジェクタ。

コードから短い断片が

myservice.service.ts

import { OpaqueToken } from '@angular/core' 

export const BACKEND = new OpaqueToken('backend'); 

app.module.ts

import { BACKEND } from 'myservice.service' 
... 
providers: [{ provide: BACKEND, useValue: "TestValue" }] 

mycomponent.component.ts

import { Component, Inject } from '@angular/core' 
import { BACKEND } from 'myservice.service' 

@Component(
{ 
selector:'mycomponent' 
templateUrl: ... 
}) 
export class MyComponent 
{ 
    constructor(@Inject(BACKEND) config: string) { 
    console.info(JSON.stringify(config)); 
    } 
} 

ように見えます

この人差し指BACKENDトークンを持つctionは、一部のコンポーネントでは機能しますが、他のコンポーネントでは機能しません（空の{}オブジェクトが挿入されます）。ブラウザでJavascriptコードをデバッグしようとしましたが、Injectorが辞書のトークンとは別のトークンで呼び出されているようです（同じ名前を 'バックエンド'としていますが、まだ異なり、=== falseを返します） 。

注：「commonjs」モジュールと「node」モジュールの解像度で、Angular 2.4.2、Typescript 2.1を使用しています。 systemjsはモジュールローダーとして使用されます。

これを修正する方法についていくつかのアイデアを教えてください。

おかげで、

Answer 1

• あなたが異なるモジュール/コンポーネントからプロバイダの様々な宣言を持っていますか？ providers配列内のすべての宣言に対して、angleはこれらのサービスの新しいインスタンスを作成します。

• @Injectableデコレータにかっこを含めましたか？ https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#injectable