Why can AuthHttp (angular2-jwt) not be dependency injected into component?

Question

UPDATE: Solution Found

It was rather simple (although horrendous to find), the configuration was wrong. To get the correct setup I updated my package.json (dependencies section) and tsconfig.json to be similar to the angular.io sample.

The most notable of these changes were:

• Updating the angular npm packages from "~4.0.0" to "~4.2.0"
• Changing the module in tsconfig.json from "system" to "commonjs"

I do not understand how that changes things, but it works!

Original Question

Context

We're attempting to set up the angular2-jwt with our Angular2/4 project using the sample configuration in the link. There are two main files:

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

Error

Can't resolve all parameters for AppComponent: (?).

Looking at the constructor of the AuthHttp class (from the .d.ts file), I have deemed that the likely culprit is that the include for AuthConfig is not working correctly, because if I try to create an instance of this class it errors stating the constructor does not exist.

I have found this resource saying I need to read up more on DI, but everything looks alright from my end. https://github.com/auth0/angular2-jwt/issues/88

Update: Found Extra Information

If the AppComponent constructor is changed to call new AuthConfig() it generates new angular2_jwt_1.AuthConfig() in the transpiled js file (This errors stating the constructor does not exist). However, if this is changed to new angular2_jwt_1.default.AuthConfig() manually in the js file, it creates the instance correctly. Could this be related to the cause?

Answer 1

I couldn't find the exact reason I'm having this issue, but it's most likely configuration based. The work around I have employed is to not use the angular2-jwt library and instead just add the bearer token to the request manually base of this angular2 jwt authentication article.

The following is how to obtain the bearer token.

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

The following is how to make an authenticated request (Token property gets current token from 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());
}

I'm still looking for a better solution and an explanation for why it would not work!