angular2 APP_INITIALIZER synchronously

Question

I need to make two HTTP call one after another before angular initialize. Is there any way to initialize angular 2 synchronously?

Please do not say our app should work asynchronously. I am working on generic build using "angular-cli" . First i need to fetch the environment which is set in a json file and on the basis of that environment i need to load configuration. So i need two HTTP calls.

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

Inside load() i have two http call one inside other but before two call get completed angular is initialized.

would github.com/angular/angular/issues/9047#issuecomment-255597990 work ? careful: APP_INITIALIZER is experimental: angular.io/docs/ts/latest/api/core/index/… — Seb
– Seb, Commented Jan 15, 2017 at 10:19

DDRamone · Accepted Answer · 2017-01-19 07:40:29Z

3

You're on a correct way. You can make both http calls into config.load() function.

 public load() {
    return new Promise((resolve, reject) => {
        this.http.get('first.json').map( res => res.json() ).catch((error: any):any => {

            console.error('Error at first call');

            resolve(error);
            return Observable.throw(error.json().error || 'Server error');
        }).subscribe( (firstResponse) => {

            let request = this.http.get('second.json');

            request
                .map( res => res.json() )
                .catch((error: any) => {
                    console.error('Error at second call');
                    resolve(error);
                    return Observable.throw(error.json().error || 'Server error');
                })
                .subscribe((secondResponse) => {

                    //Here i have both
                    firstResponse, secondResponse

                    resolve(true);
                });

        });

    });
}

Consider the fact that functions and lambdas are not supported to useFactory anymore, so you have to rewrite it little bit. Also make sure that you provide your AppConfig

function initialConfigLoad(config: AppConfig) {
    return () => config.load();
};

providers: [
    ...
    AppConfig, // <- Provide AppConfig
    {
        provide: APP_INITIALIZER,
        useFactory: initialConfigLoad,
        deps: [AppConfig],
        multi: true
    }
]

answered Jan 19, 2017 at 7:40

DDRamone

1,18811 silver badges19 bronze badges

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

1 Comment

Alo Over a year ago

Note that the most important part of this piece of code is the call to resolve(true); in the Promise. It signals to Angular that it can continue with the app initialization.

Collectives™ on Stack Overflow

angular2 APP_INITIALIZER synchronously

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related