Injection de dépendances Angulaire 2: Impossible de résoudre tous les paramètres (pas de chaîne de dépôt, pas de canon)

Question

J'ai essayé de suivre un exemple dans le ng-book 2 et j'ai rencontré des difficultés dans le chapitre 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 { } 

est ici un plunker https://plnkr.co/edit/KSXE9tnRj4tffiISyp0i cela fonctionne totalement lors de la création du ReflectiveInjector manuellement, mais lorsque je tente de prendre la voie facile et le déclarer dans les fournisseurs sur le NgModule il ne parvient me donner « ne peut pas résoudre toutes les dépendances pour AppComponent ". J'ai vérifié les autres réponses et comme vous le voyez il n'y a pas de problèmes circulaires ni de problèmes liés au tonneau - tout est dans un seul fichier. Tous les indices seraient appréciés!

Answer 1

Si vous placez plusieurs classes dans un fichier (je suis sûr que ce n'est que pour les tests), l'ordre des fichiers doit être vérifié. Dites que votre AppComponent fait référence à votre MyService, donc la définition de MyService doit être placée au-dessus de AppComponent. Par conséquent, votre code doit ressembler à ceci:

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 { }