Issue
Background: I need to perform couple of initial checks during the application start up (1) read angular app config from ./assets/config.json
file and get the API end point from there, (2) make an API call to end point retrieved in first step and load some settings from back end.
Goal: be able to initialize two services using APP_INITIALIZER
(say A & B), where B has a dependency on A. check out this stackblitz to see the problem
Things I’ve tried: If second part (being able to make an API request to the back-end) was not in the picture, then I managed to use angular APP_INITIALIZER
to get things done, I then searched for some articles and found this one Managing dependencies among App Initializers in Angular, which has 3 approaches listed, 3rd one being the recommended one (as it is easy to maintain), but I don’t really understand all of it, I believe author has not included full code implementation of each approach (I do get that it’s authors call whether to provide code samples or not, and I might be wrong). I would really appreciate if anyone with experience could share their knowledge wrt the same.
PS: I haven’t added any code in here as I am not really confident if what I have tried is sensible or not, but happy to add some code.
Stackblitz1 (single APP_INITIALIZER
) – https://stackblitz.com/edit/angular-puaw7a
[The Problem] Stackblitz2 (multiple APP_INITIALIZER
) – https://stackblitz.com/edit/angular-7uqijv
Solution
just use
useFactory: (appConfigSvc: ConfigService,settingsService:SettingsService) => {
return () => {
return appConfigSvc.loadConfig().then(()=>{
return settingsService.loadConfig()
});
};
}
See your forked code in stackblitz