angular - Perché AuthHttp (angular2-jwt) non può essere iniettato come dipendenza in un componente?

AGGIORNAMENTO: Soluzione Trovata

Era piuttosto semplice (anche se orribile da trovare), la configurazione era sbagliata. Per ottenere la configurazione corretta ho aggiornato il mio package.json (sezione dipendenze) e tsconfig.json per essere simili all'esempio di angular.io.

Le più notevoli di queste modifiche erano:

• Aggiornamento dei pacchetti npm di Angular da "~4.0.0" a "~4.2.0"
• Modificare il modulo in tsconfig.json da "system" a "commonjs"

Non capisco come questo cambi le cose, ma funziona!

Domanda originale

Contesto

Stiamo cercando di configurare angular2-jwt con il nostro progetto Angular2/4 utilizzando la configurazione di esempio nel link. Ci sono due file principali:

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

Errore

Impossibile risolvere tutti i parametri per AppComponent: (?).

Guardando il costruttore della classe AuthHttp (dal file .d.ts), ho ritenuto che il colpevole probabile sia che l'inclusione di AuthConfig non stia funzionando correttamente, perché se provo a creare un'istanza di questa classe dà errore indicando che il costruttore non esiste.

Ho trovato questa risorsa che dice che devo approfondire di più DI, ma tutto sembra a posto da parte mia. https://github.com/auth0/angular2-jwt/issues/88

Aggiornamento: Trovate informazioni aggiuntive

Se il costruttore di AppComponent viene modificato per chiamare new AuthConfig(), questo genera new angular2_jwt_1.AuthConfig() nel file js traspostato (Il quale dà errore affermando che il costruttore non esiste). Tuttavia, se questo viene modificato manualmente in new angular2_jwt_1.default.AuthConfig() nel file js, crea l'istanza correttamente. Potrebbe questo essere correlato alla causa?

Risposta n. 1

Non sono riuscito a trovare la ragione esatta per cui sto riscontrando questo problema, ma molto probabilmente è dovuto alla configurazione. La soluzione temporanea che ho adottato è di non usare la libreria angular2-jwt e invece aggiungere manualmente il token bearer alla richiesta basandomi su questo articolo sull'autenticazione jwt in angular2.

Quanto segue spiega come ottenere il token del portatore.

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

Ecco come fare una richiesta autenticata (la proprietà Token ottiene il token corrente da 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());
}

Sto ancora cercando una soluzione migliore e una spiegazione del perché non funzionerebbe!