angular - Hvorfor kan ikke AuthHttp (angular2-jwt) injiseres som avhengighet i komponenten?

OPPDATERING: Løsning funnet

Det var ganske enkelt (selv om det var fryktelig å finne), konfigurasjonen var feil. For å få riktig oppsett oppdaterte jeg min package.json (avhengighetsseksjonen) og tsconfig.json for å være lik eksemplet på angular.io.

De mest bemerkelsesverdige av disse endringene var:

• Oppdaterer Angular npm-pakkene fra "~4.0.0" til "~4.2.0"
• Endre modulen i tsconfig.json fra "system" til "commonjs"

Jeg forstår ikke hvordan det endrer ting, men det fungerer!

Original spørsmål

Kontekst

Vi prøver å sette opp angular2-jwt med vårt Angular2/4-prosjekt ved å bruke eksempelkonfigurasjonen i lenken. Det er to hovedfiler:

app.module.ts

import { AuthConfig, AuthHttp } from 'angular2-jwt';
import { NgModule } from '@angular/core';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule, routingComponents } from './app.routing';

import { AppComponent } from './Components/app.component';

@NgModule({
    imports: [BrowserModule, HttpModule, AppRoutingModule],
    declarations: [AppComponent, routingComponents],
    bootstrap: [AppComponent],
    providers: [
        {
            provide: AuthHttp,
            useFactory: (http: Http, options: RequestOptions) => new AuthHttp(new AuthConfig(), http, options),
            deps: [Http, RequestOptions]
        }]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { AuthHttp } from 'angular2-jwt';

@Component({
    selector: "app",
    templateUrl: "/App/Components/app.component.html"
})
export class AppComponent
{
    constructor(service: AuthHttp)
    { }
}

Feil

Kan ikke løse alle parametere for AppComponent: (?).

Når man ser på konstruktøren til AuthHttp-klassen (fra .d.ts-filen), har jeg kommet frem til at den sannsynlige årsaken er at inkluderingskoden for AuthConfig ikke fungerer korrekt, for hvis jeg prøver å opprette en instans av denne klassen, får jeg en feil som sier at konstruktøren ikke eksisterer.

Jeg har funnet denne ressursen som sier at jeg trenger å lese mer om DI, men alt ser bra ut fra min side. https://github.com/auth0/angular2-jwt/issues/88

Oppdatering: Fant ekstra informasjon

Hvis AppComponent-konstruktøren endres til å kalle new AuthConfig(), genererer det new angular2_jwt_1.AuthConfig() i den transpilerte js-filen (Dette gir en feil som sier at konstruktøren ikke eksisterer). Men hvis dette endres til new angular2_jwt_1.default.AuthConfig() manuelt i js-filen, opprettes instansen korrekt. Kan dette være relatert til årsaken?

Svar #1

Jeg kunne ikke finne den eksakte grunnen til at jeg har dette problemet, men det er mest sannsynlig konfigurasjonsbasert. Løsningen jeg har tatt i bruk er å ikke bruke angular2-jwt-biblioteket, og i stedet legge til bærertokenet til forespørselen manuelt basert på denne artikkelen om angular2 jwt-autentisering.

Følgende er hvordan man får tilgang til bærertokenet.

public Login(username: string, password: string): Observable<boolean>
{
    // Prepare post headers
    var headers: Headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    // Prepare credential request
    var body: string = "grant_type=password&scope=scopes go here&username=" + username + "&password=" + password;

    return this.http
        .post("token url here", body, { headers: headers })
        .map((response: Response) =>
        {
            let token = response.json();
            token = token && token.access_token;
            if (!token)
                return false;
            else
            {
                localStorage.setItem('username', username);
                localStorage.setItem('token', token);
                return true;
            }
        });
}

Følgende er hvordan man lager en autentisert forespørsel (Token-egenskapen henter gjeldende token fra localStorage).

public Post<T>(url: string, body: string): Observable<T>
{
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.Token });
    let options = new RequestOptions({ headers: headers });

    return this.http
        .post(url, body)
        .map((response: Response) => response.json());
}

Jeg leter fortsatt etter en bedre løsning og en forklaring på hvorfor det ikke ville fungere!