Angular 2: Wie verwende ich einen Provider, der beim Bootstrapping in einen anderen Dienst injiziert wird?

Question

Ich habe Probleme zu verstehen, wie man einen Provider verwendet, der auf der Stammebene in anderen Teilen einer Angular 2-App injiziert wird.

Ich habe einen Factory Provider angular2-jwt, der mit JWT-Authentifizierung hilft. Ich spritze es in meine main.ts, wo ich das Bootstrapping des App tun wie so:

import {provide, enableProdMode} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {APP_BASE_HREF} from 'angular2/platform/common'; 
import {HTTP_PROVIDERS, Http} from 'angular2/http'; 
import {AuthHttp, AuthConfig} from 'angular2-jwt'; 
import { User } from '../shared/models/user.model'; 
import {AppComponent} from './app/components/app.component'; 

if ('<%= ENV %>' === 'prod') { enableProdMode(); } 

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(AuthHttp, { 
    useFactory: (http: any) => { 
     return new AuthHttp(new AuthConfig({ 
     headerName: 'Authorization', 
     headerPrefix: 'Bearer', 
     tokenName: 'auth_token', 
     globalHeaders: [{'Content-Type':'application/json'}], 
     noJwtError: true, 
     noTokenScheme: true 
     }), http); 
    }, 
    deps: [Http] 
    }), 
    provide(User, {useClass: User}), 
    provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }) 
]); 

Dies funktioniert gut. Ich schrieb dann ein kleines AuthService, das die Anrufe zu meinem Backend macht und An-/Abmelden und den Speicher des JWT handhabt. Hier möchte ich den AuthHttp Provider nutzen. Wie ich in der Dokumentation lese: Wenn ich einen Dienst mit der Bereitstellung auf Root-Ebene injiziere, weiß Angular, wie man es bekommt, wenn ich es an einem anderen Punkt verwende (dh in einem anderen Dienst). Aber ich bekomme einen cannot find name authHttp Fehler.

Meine AuthService sieht wie folgt aus:

import { Headers } from 'angular2/http'; 
import { Router } from 'angular2/router'; 
import { Injectable } from 'angular2/core'; 
import { JwtHelper } from 'angular2-jwt'; 

@Injectable() 
export class AuthService { 
    token: any; 
    jwtHelper: JwtHelper = new JwtHelper(); 

    constructor(private router: Router, private authHttp: AuthHttp, private user: User) {} 

    saveJwt(jwt: any) { 
    if(jwt) { 
     localStorage.setItem('auth_token', jwt); 
     this.token = localStorage.getItem('auth_token'); 
    } 
    } 

    deleteJwt() { 
    localStorage.removeItem('auth_token'); 
    this.token = localStorage.getItem('auth_token'); 
    } 

    isAuth() { 
    var decoded: any; 
    decoded = this.jwtHelper.decodeToken(this.token); 
    var date = new Date(0); 
    date.setUTCSeconds(decoded.exp); 
    if(date === null) { 
     return false; 
    } 
    return (date.valueOf() > (new Date(0).valueOf())); 
    } 

    login(user: User) { 
    var header = new Headers(); 
    header.append('Content-Type', 'application/json'); 
    return this.authHttp.post('http://localhost:4000/sessions', JSON.stringify({ email: user.email, password: user.password }), { 
     headers: header 
    }) 
    .map(res => res.json()) 
    .subscribe(
     data => { 
     console.log('Logged id'); 
     this.saveJwt(data.auth_token); 
     }, 
     err => console.log(err), 
    () => this.router.navigate(['Home']) 
    ); 
    } 

    logout() { 
    this.deleteJwt(); 
    this.router.navigate(['Home']); 
    } 

} 

ich dann bin mit AuthService in einem LoginComponent. Wie so:

import { Component } from 'angular2/core'; 
import { COMMON_DIRECTIVES } from 'angular2/common'; 
import { AuthService } from '../shared/services/auth.service'; 
import { User } from '../shared/models/user.model'; 

@Component ({ 
    selector: 'login', 
    moduleId: module.id, 
    directives: [COMMON_DIRECTIVES], 
    providers: [AuthService], 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
}) 
export class LoginComponent { 

    constructor(
    public auth: AuthService, 
    public user: User 
) {} 

    submitted = false; 

    onSubmit() { 
    this.submitted = true; 
    this.auth.login(this.user); 
    console.log(JSON.stringify(this.user)); 
    } 

    // TODO: Remove when done 
    get diagnostic() { return JSON.stringify(this.user); } 
} 

Answer 1

Sie müssen die AuthService an die Anbieter hinzuzufügen, als auch

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(AuthHttp, { 
    useFactory: (http: any) => { 
     return new AuthHttp(new AuthConfig({ 
     headerName: 'Authorization', 
     headerPrefix: 'Bearer', 
     tokenName: 'auth_token', 
     globalHeaders: [{'Content-Type':'application/json'}], 
     noJwtError: true, 
     noTokenScheme: true 
     }), http); 
    }, 
    deps: [Http] 
    }), 
    provide(User, {useClass: User}), 
    provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }), 
    AuthService 
]);