为什么不能将AuthHttp (angular2-jwt)依赖注入组件？

Question

更新:找到解决方案

它相当简单(尽管很难找到)，但配置是错误的。为了获得正确的设置，我更新了我的package.json (依赖项部分)和tsconfig.json，使其类似于angular.io样品。

其中最显著的变化是：

• 将角npm包从"~4.0.0“更新到"~4.2.0”
• 将tsconfig.json中的模块从"system“改为"commonjs”

我不明白这是如何改变事情，但它的工作！

原始问题

上下文

我们试图使用链接中的示例配置使用Angular2 2/4项目设置angular2-jwt。有两个主要文件：

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

错误

不能解析AppComponent的所有参数：(?)。

查看AuthHttp类的构造函数(来自.d.ts文件)，我认为可能的罪魁祸首是AuthConfig的IncludeforAuthConfig不能正常工作，因为如果我试图创建该类的一个实例，它就会错误地声明构造函数不存在。

我发现这个资源说我需要读更多关于DI的内容，但是从我的结尾看一切都很好。https://github.com/auth0/angular2-jwt/issues/88

更新:找到额外信息

如果将AppComponent构造函数更改为调用new AuthConfig()，它将在转置的js文件中生成new angular2_jwt_1.AuthConfig() (此错误声明构造函数不存在)。但是，如果在js文件中手动将其更改为new angular2_jwt_1.default.AuthConfig()，则会正确地创建实例。这可能与原因有关吗？

Answer 1

我找不到我有这个问题的确切原因，但这很可能是基于配置的。我所做的工作是不使用angular2-jwt库，而只是将承载令牌添加到这个angular2 jwt认证文章的请求库中。

以下是如何获得承载令牌。

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

下面是如何发出经过身份验证的请求(Token属性从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());
}

我仍然在寻找一个更好的解决方案，并解释为什么它不能工作！