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

Possible duplicate of Angular 2 - Services consuming others services before call a method — Estus Flask
– Estus Flask, Commented Nov 27, 2016 at 10:14
Check out also comments to this question stackoverflow.com/questions/40522938/… — yurzui
– yurzui, Commented Nov 27, 2016 at 10:16
I've seen this topics before I asked. They does not work for me. — Mariusz.v7
– Mariusz.v7, Commented Nov 27, 2016 at 10:28

Mariusz.v7 · Accepted Answer · 2016-11-27 13:56:37Z

9

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
    },
]

answered Nov 27, 2016 at 13:56

Mariusz.v7

2,4622 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gtzinos Over a year ago

How can i use this value on another component ? Please send an example using plnkr.co

Mariusz.v7 Over a year ago

Use it like always: constructor(private configService:ConfigService) {}. I'll be injected without problems.

Collectives™ on Stack Overflow

Angular2 - asynchronous dependency injection

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related