角2依存性注入：すべてのパラメータを解決できません（デップチェーンなし、バレルなし）

Question

私はng-book 2の1つの例を実行しようとしていて、DIの章で問題に遭遇しました。

@Component({ 
    selector: 'app-root', 
    template: ` 
     <button (click)="invokeService()">Get Value</button> 
    ` 
}) 
export class AppComponent { 
    constructor(public myService: MyService) {} 

    invokeService() { 
     console.log(this.myService.getValue()); 
    } 
} 
@Injectable() 
export class MyService { 
    getValue(): string { 
     return 'a value'; 
    } 
} 
@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [MyService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

はここに手動でReflectiveInjectorを作成するとき、それは完全に動作しますplunker https://plnkr.co/edit/KSXE9tnRj4tffiISyp0iだが、私は簡単な方法を取ると、それは私を与える失敗NgModule上のプロバイダでそれを宣言しようとすると、「AppComponentのすべての依存関係を解決できません。 "私は他の答えをチェックし、円形のデープやバレル関連の問題はないことがわかります。それはすべて1つのファイルにあります。どんなヒントもありがとう！

Answer 1

複数のクラスを1つのファイルに入れている場合（これはテスト専用です）、ファイルの順番を確認する必要があります。 AppComponentがMyServiceを参照しているので、MyServiceの定義をAppComponentの上に置く必要があります。したがって、あなたのコードは次のようなものを見なければならない：

import { Component, ReflectiveInjector, Injectable, Inject } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

@Injectable() 
export class MyService { 
    constructor() {} 

    getValue(): string { 
     return 'a value'; 
    } 
} 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <button (click)="invokeService()">Get Value</button> 
    ` 
}) 
export class AppComponent { 
    // private myService: MyService; 

    constructor(public myService: MyService) { 
     // let injector: any = ReflectiveInjector.resolveAndCreate([MyService]); 
     // this.myService = injector.get(MyService); 
     // console.log('Same instance? ', this.myService === injector.get(MyService)); 
    } 

    invokeService() { 
     console.log(this.myService.getValue()); 
    } 
} 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [MyService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }