An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
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 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. Lets 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};
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 dont forget to add error handling to that request.
Thanks to Yadong Xie for this wonderful contribution.
Photo by Katerina Pavlyuchkova on Unsplash
Original Link: https://dev.to/this-is-angular/using-observable-in-appinitializer-40bm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To