Using Observable in APP_INITIALIZER

An exciting new feature is coming to Angular v12 – support for Observables in APP_INITIALIZER ?

Note: This feature was added in v12.0.0-next.2.

Up until now, if you wanted to execute something asynchronous as part of APP_INITIALIZER, say an HTTP requ…

An exciting new feature is coming to Angular v12 – support for Observables in APP_INITIALIZER ?

Note: This feature was added in v12.0.0-next.2.

Up until now, if you wanted to execute something asynchronous as part of APP_INITIALIZER, say an HTTP request to get some configuration, your only option was to convert it to a Promise. Often times using toPromise() (which, btw, is deprecated in the upcoming RxJS v7).

This is no more! In v12 you will be able to directly return an Observable. Let’s see how:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
import { ConfigService } from "./config.service";

function loadConfigFactory(configService: ConfigService) {
  // Easy as pie ?
  return () => configService.getConfig(); // ?

  // How you might've done it “before”
  // return () => configService.getConfig().toPromise();
}

export const loadConfigProvider: FactoryProvider = {
  provide: APP_INITIALIZER,
  useFactory: loadConfigFactory,
  deps: [ConfigService],
  multi: true
};
Enter fullscreen mode

Exit fullscreen mode

An important thing to note is that the Observable must complete, otherwise the bootstrap process will not continue.

Now, place the loadConfigProvider variable in the providers array of a Module and everything should be working fine. Check out this Stackblitz to see it in action.

Oh, and don’t forget to add error handling to that request. ?

Thanks to Yadong Xie for this wonderful contribution.

Photo by Katerina Pavlyuchkova on Unsplash


Print Share Comment Cite Upload Translate
APA
Dzhavat Ushev | Sciencx (2024-03-28T20:46:59+00:00) » Using Observable in APP_INITIALIZER. Retrieved from https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/.
MLA
" » Using Observable in APP_INITIALIZER." Dzhavat Ushev | Sciencx - Thursday February 25, 2021, https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/
HARVARD
Dzhavat Ushev | Sciencx Thursday February 25, 2021 » Using Observable in APP_INITIALIZER., viewed 2024-03-28T20:46:59+00:00,<https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/>
VANCOUVER
Dzhavat Ushev | Sciencx - » Using Observable in APP_INITIALIZER. [Internet]. [Accessed 2024-03-28T20:46:59+00:00]. Available from: https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/
CHICAGO
" » Using Observable in APP_INITIALIZER." Dzhavat Ushev | Sciencx - Accessed 2024-03-28T20:46:59+00:00. https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/
IEEE
" » Using Observable in APP_INITIALIZER." Dzhavat Ushev | Sciencx [Online]. Available: https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/. [Accessed: 2024-03-28T20:46:59+00:00]
rf:citation
» Using Observable in APP_INITIALIZER | Dzhavat Ushev | Sciencx | https://www.scien.cx/2021/02/25/using-observable-in-app_initializer/ | 2024-03-28T20:46:59+00:00
https://github.com/addpipe/simple-recorderjs-demo