Skip to main content

How to use the APP_INITIALIZER token to hook into the Angular bootstrap process

I've been building applications using Angular as a framework of choice for more than a year and this post is not about 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 - 'A function that will be executed when an application is initialized'. It does not spew 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:


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


The factory function is expected to return a Promise and only after the promise has resolved the application bootstrap process would 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:


The 'get' method 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

Comments

Popular posts from this blog

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o...

Using MobX to manage application state in a React application

I have been writing applications using React and Redux for quite some time now and thought of trying other state management solutions out there. It's not that I have faced any issues with Redux; however, I wanted to explore other approaches to state management. I recently came across MobX  and thought of giving it a try. The library uses the premise of  `Observables` to tie the application state with the view layer (React). It's also an implementation of the Flux pattern wherein it uses multiple stores to save the application state; each store referring to a particular entity. Redux, on the other hand, uses a single store with top-level state variables referring to various entities.