Cant finden Anbieter in Router-Ausgang Kind

Question

ich einen Service aufgebaut haben, die ich benutze meine http zu behandeln fordert ApiService und ich habe mehrere Dateien hinzugefügt, die meine http ruft wickeln schön, so kann ich sie (nur für einen Prozess, sie alle folgen dem gleichen Stil EmailApiService und so und haben die meine Komponenten übergebenen Daten zurück, wie sie es brauchen.

Das Problem, das ich habe, ist allerdings, dass in einen meiner Komponenten ReportsComponent, die den Router gesteuert wird, I holen Sie sich den Fehler

angular2.js?1460130081845:23877 EXCEPTION: Error: Uncaught (in promise): No provider for EmailApiService! (ReportsComponent -> EmailApiService)

die Anrufe an den EmailApiService Methoden sind im Konstruktor von ReportsComponent

Wenn ich die gleichen Anrufe zu meinem ToolbarComponent Konstruktor hinzufügen (genauso wie ich mache es für die Berichte) sie perfekt funktionieren.

Das führt mich zu der Annahme, dass entweder etwas schief geht mit der Übertragung von Providern an Kinder, die über den Router hinzugefügt werden, oder ich nähere mich ihm falsch.

app.component

import {ToolbarComponent} from './toolbar.component'; 
//pages 
import {HomeComponent} from '../../home/components/home.component'; 
import {ReportsComponent} from '../..//reports/components/reports.component'; 
import {SignInComponent} from '../../signin/components/signin.component'; 
import {UserDetailsService} from '../../shared/services/user-details.service'; 
import {ApiService} from '../../shared/services/api.service'; 
import {EmailApiService} from '../../shared/services/email-api.service'; 
@Component({ 
    selector: 'app', 
    viewProviders: [ApiService, EmailApiService, UserDetailsService], 
    directives: [ROUTER_DIRECTIVES, ToolbarComponent] 
}) 
@RouteConfig([ 
    { path: '/', name: 'Sign In', component: SignInComponent, useAsDefault: true }, 
    { path: '/home', name: 'Home', component: HomeComponent }, 
    { path: '/reports', name: 'Reports', component: ReportsComponent } 
]) 

export class AppComponent { 
    constructor() {} 
} 

app.html (Anrufe arbeiten auf dem <toolbar> aber nicht die <router-outlet> (wenn ich navigieren Sie zu der Seite mit den Berichten über die Navigationsleiste)

<div class="container-fluid"> 
    <toolbar></toolbar>  
    <router-outlet></router-outlet> 
</div> 

apiService

@Injectable() 
export class ApiService { 
    constructor(public http: Http, 
       public userDetailService: UserDetailsService) { 
    } 

    request(type: RequestMethod, url: string, data: any, afterSuccess?: any) { 
    .... 
    } 

    get(url: string, data: any, afterSuccess?: any) { 
    .... 
    } 

    post(url: string, data: any, afterSuccess?: any) { 
    .... 
    } 
} 

emailapiService

@Injectable() 
export class EmailApiService { 

    token: string; 
    service_provider_id: number; 

    constructor(public apiService: ApiService, 
       public userDetailService: UserDetailsService) { 
    this.token = this.userDetailService.token; 
    this.service_provider_id = this.apiService.service_provider_id; 
    } 

    emailExists() { 
.... 
    return this.apiService.get('emails/email-address/exists'); 
    } 


    emailSend() 
.... 
    return this.apiService.post('emails/send'); 
    } 
} 

reportsComponent (nicht funktioniert, wirft fehlende Anbieter)

@Component({ 
    selector: 'reports', 
    moduleId: module.id, 
    templateUrl: './reports.component.html', 
    styleUrls: ['./reports.component.css'], 
    directives: [] 
}) 
export class ReportsComponent { 
    constructor (public emailApiService: EmailApiService, 
       public userDetailsService: UserDetailsService) { 
    this.emailApiService.emailExists('test@gmail.com'); 
    this.emailApiService.emailSend('test', 'test@gmail.com'); 
    console.log(this.userDetailsService.loggedIn); 
    } 
} 

toolbarComponent (Arbeiten, Anrufe erfolgreich)

@Component({ 
    selector: 'toolbar', 
    moduleId: module.id, 
    templateUrl: './toolbar.component.html', 
    styleUrls: ['./toolbar.component.css'], 
    directives: [] 
}) 
export class ToolbarComponent { 
    constructor(public emailApiService: EmailApiService, 
    public userDetailsService: UserDetailsService) { 
    this.emailApiService.emailExists('test@gmail.com'); 
    this.emailApiService.emailSend('test', 'test@gmail.com'); 
    console.log(this.userDetailsService.loggedIn); 
    } 
} 

Eine Sache, die ich an und haben sich um gelesen ausgesehen haben wird apiService Hinzufügen und emailApiService and UserDetailService zu meinem Bootstrap, aber ich denke, dass ich das nicht tun sollte und ich habe etwas verpasst, da es auf der Symbolleiste funktioniert.

meine Bootstrap von meinem main.ts

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }) 
]); 

Vielen Dank im Voraus für die Zeit nehmen, um mir zu helfen.

bearbeiten

Ich habe viewProviders in der App-Komponente providers versucht zu ändern, und ich immer noch das gleiche Problem bekommen.

mir das Gefühl, dass es richtig sein kann tatsächlich hinzuzufügen, diese von Haaren aus dem Sumpf bieten, da sie Dateien sein, die speichern und zum Austausch von Daten über die App und verwendete zugegriffen wird.

Answer 1

<div class="container-fluid> 
         ^missing closing " 
    <toolbar></toolbar>  
    <router-outlet></router-outlet> 
</div> 

sonst nicht Plunker example

bearbeiten Lösung gefunden wurde, reproduzieren und sprach in den Kommentaren über. Bei den Importen gibt es eine extra/

import {ReportsComponent} from '../..//reports/components/reports.component';` 

import {ReportsComponent} from '../../reports/components/reports.component';`