angular - Proč nelze AuthHttp (angular2-jwt) závislostně injektovat do komponenty?

AKTUALIZACE: Řešení nalezeno

Bylo to poměrně jednoduché (i když děsivé na nalezení), konfigurace byla špatná. Abych získal správné nastavení, aktualizoval jsem svůj soubor package.json (část závislostí) a tsconfig.json tak, aby byly podobné ukázce na angular.io.

Nejpozoruhodnější z těchto změn byly:

• Aktualizace balíčků Angular npm z "~4.0.0" na "~4.2.0"
• Změna modulu v tsconfig.json z "system" na "commonjs"

Nerozumím, jak to mění věci, ale funguje to!

Původní otázka

Kontext

Snažíme se nastavit angular2-jwt s naším projektem Angular2/4 pomocí ukázkové konfigurace v odkazu. Jsou zde dva hlavní soubory:

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

Chyba

Nelze vyřešit všechny parametry pro AppComponent: (?).

Při pohledu na konstruktor třídy AuthHttp (ze souboru .d.ts) jsem dospěl k závěru, že pravděpodobným viníkem je to, že zahrnutí pro AuthConfig nefunguje správně, protože pokud se pokusím vytvořit instanci této třídy, zobrazí se chyba s informací, že konstruktor neexistuje.

Našel jsem tento zdroj, který říká, že si musím více nastudovat DI, ale z mé strany vše vypadá v pořádku. https://github.com/auth0/angular2-jwt/issues/88

Aktualizace: Nalezeny další informace

Pokud je konstruktor AppComponent změněn tak, aby volal new AuthConfig(), v přeloženém souboru js se vygeneruje new angular2_jwt_1.AuthConfig() (tato chyba uvádí, že konstruktor neexistuje). Nicméně, pokud je to ručně změněno v souboru js na new angular2_jwt_1.default.AuthConfig(), instance se vytvoří správně. Může to souviset s příčinou?

Odpověď č. 1

Nemohl jsem najít přesný důvod, proč mám tento problém, ale je to s největší pravděpodobností založeno na konfiguraci. Řešení, které jsem použil, je nepoužívat knihovnu angular2-jwt a místo toho přidat bearer token k požadavku ručně na základě tohoto článku o autentizaci angular2 jwt.

Následuje návod, jak získat nositele tokenu.

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;
            }
        });
}

Následuje návod, jak provést ověřený požadavek (vlastnost Token získá aktuální token z 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());
}

Stále hledám lepší řešení a vysvětlení, proč by to nefungovalo!