更新：找到解决方案

Question

更新：找到解决方案

这很简单（虽然发现很可怕），配置错了。为了获得正确的设置，我更新了我的package.json（依赖项部分）和tsconfig.json，使其与angular.io sample类似。

这些变化中最值得注意的是：

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

我不明白这是如何改变的，但它确实有效！

原始问题

上下文

我们正尝试使用链接中的示例配置，使用我们的Angular2 / 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的包含不能正常工作，因为如果我尝试创建一个这个类的实例是错误，说明构造函数不存在。

我发现这个资源说我需要阅读更多有关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 authentication article的请求添加到请求中。

以下是如何获取持票人令牌。

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

以下是如何进行经过身份验证的请求（令牌属性从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());
}

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

为什么AuthHttp（angular2-jwt）不能被依赖注入组件？

更新：找到解决方案

原始问题

上下文

错误

更新：找到额外信息

1 个答案: