@NgModule中的依赖项注入不起作用Angular2 2.1.0

Question

I am trying to correctly set up @NgModule in the latest Angular2 2.1.0. I have some injectable code that relies on other injectable code, and the dependence is not getting initialized for some reason.

When the app starts I get the following error: core.umd.js:3076 TypeError: Cannot read property 'getTokenPromise' of undefined at Object.tokenGetter (app.module.ts:68)

The undefined object in this case is unifiedLogin in the line return unifiedLogin.getTokenPromise();

I expected that UnifiedLogin login would have been injected into AuthHttp and initialized but it is not.

This is a fairly large project so I am only including what I hope are the relevant code fragments.

This is the section of my @NgModule statement that is in question from app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { UnifiedLogin } from './unified-login';
import { AppComponent }  from './app.component';

...

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        AppRoutingModule
    ],
    providers: [
        UnifiedLogin,
        {
            provide: AuthHttp,
            useFactory: (http: Http, unifiedLogin: UnifiedLogin) => {
                return new AuthHttp(new AuthConfig({
                    tokenGetter: (() => {
                        return unifiedLogin.getTokenPromise();
                    })
                }), http);
            },
            deps: [UnifiedLogin]
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Here is the UnifiedLogin code that I expected to be initialized and injected into AuthHttp but wasn't

import { Injectable } from '@angular/core';

...

@Injectable()
export class UnifiedLogin {

    ... 

    public getTokenPromise(): Promise<string> {
        return this._storage.get('id_token');
    }   
}

Answer 1

You need to list the dependencies in deps that you use in the useFactory function. Since you only list deps: [UnifiedLogin] , the UnifiedLogin gets passed as the first argument to the useFactory function, and the second argument gets nothing.

You should add the Http to deps so the arguments are resolved accordingly

{
    provide: AuthHttp,
    useFactory: (http: Http, unifiedLogin: UnifiedLogin) => {
        return new AuthHttp(new AuthConfig({
            tokenGetter: (() => {
                return unifiedLogin.getTokenPromise();
            })
        }), http);
    },
    deps: [Http, UnifiedLogin]   <====== Http
}