Angular 2 get config from server before bootstrap

Question

I need to get configuration from server before the application bootstraps. I was able to do that using this in providers in my main ngModule:

{
    provide: APP_INITIALIZER,
    useFactory: (links: Links) => () => links.init(),
    deps: [Links, Http],
    multi: true
}

Links service:

init(): Promise<any> {
    var observable = this.http.get('someUrl').map(res => res.json());
    observable.subscribe(res => {
        this.config = res;
    });
    return observable.toPromise();
}

This code gets executed before the application bootstraps, but the response from server is not present until after my app asks for Links.config. How do I force the app to not bootstrap until after the Promise gets resolved? I tried promise.resolve(), but it didn't help.

The way I used providers I thought I forced the app to use the same instance of Links and also I thought the data would be already present there. What am I doing wrong please?

Gevorg Narimanyan · Accepted Answer · 2016-10-16 21:49:14Z

3

In my code I am doing exactly same and it's working only difference is that I am converting the request to Promise before mapping.

public load(): Promise<void> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let url = this.urls.settings;

    return this.http.get(url, { headers }).toPromise().
        then(configs => {
            this.startupSettings = configs.json();
        }).catch(err => {
            log(err);
        });
}

...............................

    {
        provide: APP_INITIALIZER,
        useFactory: (config: StartupConfigurationService) => () => config.load(),
        deps: [StartupConfigurationService],
        multi: true
    }

I don't sure it will make sense but try may be it will solve

answered Oct 16, 2016 at 21:49

Gevorg Narimanyan

2963 silver badges15 bronze badges

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

1 Comment

Zoidy Over a year ago

Brilliant, I had an error in resolving the promise, your way works. Thanks !

Community · Accepted Answer · 2017-05-23 12:02:18Z

2

As suggested at #37611549 and #35215112, the @ngx-config/core utility can be helpful to get your config from server during the app initialization.

You can achieve similar results by fetching data within SystemJS imports. However, I don't suggest such an approach - because it will create a risk that your config values won't be statically analyzable during AoT compilation.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Nov 26, 2016 at 12:22

Burak Tasci

91712 silver badges19 bronze badges

3 Comments

Ferrybig Over a year ago

Just linking to your own library is not a good answer. Linking to it, explaining why it solves the problem, providing code on how to do so and disclaiming that you wrote it makes for a better answer. See: What signifies “Good” self promotion?

Burak Tasci Over a year ago

Thanks @Ferrybig. Of course I want to provide more detailed, in-depth code instructions. However, when I answer for the same problem on multiple threads, the system identifies it as a duplicate.

jlh Over a year ago

I've searched for hours about how to best provide a server-side config to the application. This answer is by far the most painless way to do it and it's very well documented. Thanks!

Community · Accepted Answer · 2017-05-23 11:46:52Z

0

Please look at the work around that I have used here

Loading server side settings angular2 2.0.1

In short guard your route with a CanActivate class using a Promise which loads the config settings should also work.

Ensures that your settings are available when the corresponding components are constructed. (using the APP_INITIALIZER did not restrict the constructor being called, so I had to use this technic, Also please make sure, you dont export all the components in the exports:[] in the module)

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 20, 2016 at 21:17

abhijoseph

3171 gold badge3 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular 2 get config from server before bootstrap

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related