Angular2 - asynchronous dependency injection

Question

I use Angular2 v2.2.3

I've created common module with forRoot() function, like this:

    ...
    public static forRoot(): ModuleWithProviders {
    return {
        ngModule: CommonsModule,
        providers: [
            SomeOtherDependency,
            {
                provide: ConfigService,
                useFactory: ConfigFactory,
                deps: [Http]
            }                
        ]
    };

Here is my ConfigFactory:

export function ConfigFactory(http:Http):Promise<ConfigService> {    
    return http.get('confg/config.json').map(r => {
        return new ConfigService(r);
    }).toPromise();
}

I've tried to return Promise and Observable as well.

SomeOtherDependency defined in providers requires ConfigService. The problem is that Angular does not inject value resolved by promise but promise itself.

How can I force angular to wait until promise is resolved with proper dependency and only then inject it to other dependencies?

I've tried different approaches and always injected value is promise or observable. Just like the iniector ignores what type factory returned. I need to load some json files before whole application starts

Answer 1

I've found a problem.

I was returning a promise from my factory when I needed to return function instead. Also I missed "multi" argument from provider section. Here is updated factory which works with APP_INITIALIZER:

export function ConfigFactory(config:ConfigService, http:Http):Function {
    return () => config.load(http);
}

And in module:

providers: [
    ConfigService,
    {
        provide: APP_INITIALIZER,
        useFactory: ConfigFactory,
        deps: [ConfigService, Http],
        multi: true
    },
]