Asynchronous HTTP calls at boot time

Question

I am currently creating an Angular 2 component library so that future user interface projects can share code that implements standard functions. One of my requirements is that these user interface applications need some data from the server when they start. I wanted to encapsulate this in my library.

Therefore, when I inject a service from my library into my application, I would like to make an http call to the server endpoint to get some configuration. This can happen after the instance is created.

I'm not sure if this is a good idea or not, will the Angular 2 bootstrap procedure wait for the injected services to complete the http calls?

I saw a couple of different ways to download an Angular 2 application asynchronously, but I don’t want to have this code inside my application, but stay inside my library. I try to hide the details of this process inside my library so that other developers do not try to crack it.

Answer 1

You can use the service APP_INITIALIZER. In this case, the application will expect that the returned promise will be resolved before the start of the launch.

Here is an example:

provide(APP_INITIALIZER, {
  useFactory: (service:SomeService) => () => service.init(),
  deps:[GlobalService, HTTP_PROVIDERS], multi: true
})

The method initwould like something like this:

init():Promise<Site> {
  var promise = this.http.get('config.json').map(res => res.json()).toPromise();
  promise.then(config => this.devServer = config.devServer);
  return promise;
}

See this issue on github for more details:

• https://github.com/angular/angular/issues/9047