How to Use the APP_INITIALIZER Token to Hook Into the Angular Bootstrap Process

gowebing

I've been building applications using Angular as a framework of choice for more than a year and this post is not another React vs. Angular or the quirks of each framework. Honestly, I like Angular and every day I discover something new which makes development easier and makes me look like a guy who built something very complex in a matter of hours, which would've taken a long time to put the correct architecture in place if I had chosen a different framework. The first thing that I learned in Angular is the use of the APP_INITIALIZER token.

The documentation at angular.io says APP_INITIALIZER is "a function that will be executed when an application is initialized." It does not give any details on how to use this function and where to include it.

Sidenote: I must say the documentation could've been better with examples and a detailed explanation for the given feature could've helped. But hey, I can't hold this against you Angular.

The APP_INITIALIZER token is used when you want to get the application's configuration details from an API and keep it ready before the application renders the page. For example, you would want to load the necessary language files before rendering any of the templates or you would want to resolve a remote API which provides information on the environment that the application is being run on. It's similar to how the resolve attribute in the router's configuration is used to get data from the remote API and feed it into the route's data source. In this case, the remote API is resolved first and then the application continues with the bootstrap process.

Here's an example of how the APP_INITIALIZER token is included in the application. The main module of the application, app.module.ts, includes the APP_INITIALER in its providers section:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Notice that theproviders section includes APP_INITIALIZER with the attribute useFactory, referring to factory function initApp. Here's the definition of the initApp factory function:

export function initApp() {
  return () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('In initApp');
        resolve();
      }, 3000);
    });
  };
}

The factory function is expected to return a Promise and only after the promise has resolved will the application bootstrap process continue. In the above code snippet, a delay of three seconds is added before the promise resolves. This blocks the bootstrapping of the application for three seconds. Similarly, you could use an HTTP service (from HttpClient) to request data from an API and only after the request is complete that the application bootstrap process would continue. However, to use Angular's HttpClient in the initApp factory function, include  HttpClientModule in the imports section and also specify HttpClient as a dependency ( deps) to the APP_INITIALIZER provider:

imports: [
  BrowserModule,
  HttpClientModule
],
providers: [{
  provide: APP_INTIALIZER,
  useFactory: initApp,
  multi: true,
  deps: [HttpClient]
}]
...

Next, update the  initiApp factory function and use the instance of HttpClient to request data from a remote service:

export function initApp(http: HttpClient) {
  return () => {
    return http.get('https://api.github.com/users/sagar-ganatra')
      .toPromise()
      .then((resp) => {
        console.log('Response 1 - ', resp);
      });
  };
}

The getmethod on the HttpClient instance returns a Subscription (see RxJS) and the toPromise method is used to convert the Subscription to a Promise. If the factory method returns the subscription, the application would continue to bootstrap as if there was no APP_INITIALIZER token added to the module.

The source code for the above example is available at https://github.com/sagar-ganatra/angular-app-initializer.

 

 

 

 

Top