angular multiple APP_INITIALIZER that depend on each other

I know that it's been while, but I have yet another solution. I made wrapper for initializer function that depends on config.

In app-module define providers like this:

providers: [
    { provide: APP_INITIALIZER, useFactory: initConfig, deps: [...], multi: true },
    { 
        provide: APP_INITIALIZER,
        useFactory: withConfig(initCrm, [initCrm_Deps]), // use wrapper 
        deps: [Injector], // Injector is required for withConfig
        multi: true
    }
]

Wrapper function:

export function withConfig(factory: Function, deps: any[]) {
    return (injector: Injector) => {
        return () => AppConfig.instance$
            .toPromise()
            .then(() => {
                // Inject dependencies
                const depsInstances = deps.map(d => injector.get(d));

                // Execute original function
                return factory.apply(globalThis, depsInstances)();
            });
    };
}

AppConfig.instance$ is a Subject which emits value after config is loaded.

I don't think you actually need an initializer in your case. You just have a value that other services depend on. The problem in your code is that you have an async value and try to expose it as a sync value.

I think your problems would be solved if you would just expose the config as an Observable and "await" it where it's needed. The benefits are that the application loads as much as it can until the config requests are done.

For example the shareReplay(1) operator will keep in memory the item and will defer the HTTP request until it's actually needed:

export class ConfigService {

  configData$ = this.httpClient.get<{config1:string}>('./assets/config.json').pipe(shareReplay(1));

  constructor(private httpClient: HttpClient) { }
}

Now your 2nd service can await the configData from the 1st service. Or just transform it via observable piping and expose it further as an observable to defer everything until it's actually needed.

@Injectable({
  providedIn: 'root'
})
export class SettingsService {

  settingsData$ = this.configService.configData$.pipe(
    map(c => c.config1 + '...and config service dependent action'),
    shareReplay(1), // also keep the value in memory maybe?
  );

  constructor(
    private httpClient: HttpClient,
    private configService: ConfigService
    ) { }
}

export class HelloComponent implements OnInit {

  @Input() name: string;

  dataFromConfigSvc: Observable<string>;
  constructor(private configService: ConfigService) { }

  ngOnInit() {
    // you could either use async pipe in the template or subscribe here and get the value
    this.dataFromConfigSvc = this.configService.configData$.pipe(map(c => c.config1));
  }

}

To follow up on my comments on @Eliseo's post which worked out very well for me I also needed to load config for another provider step as I set up my GraphQL backend based on docker environments. Here is my code:

app.module.ts:

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

var graphqlUri: string = "";

...
providers: [
  AppConfigService,
  {
    provide: APP_INITIALIZER,
    useFactory: (appConfigService: AppConfigService) => {
      return () => {
        return appConfigService.loadAppConfig().then(() => {
          graphqlUri = appConfigService.getConfig().graphqlApiBaseUrl;
        });
      };
    },
    multi: true,
    deps: [AppConfigService]
  },
  {
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  },
  {
    provide: APOLLO_OPTIONS,
    useFactory: (httpLink: HttpLink) => {
      return {
        cache: new InMemoryCache(),
        uri: graphqlUri,
        deps: [HttpLink]
      }
    } 
  }
]
...

@Eliseo's response worked well for me, though I had to change his stack blitz service code to be like this:

import {firstValueFrom} from 'rxjs';

async getData(): Promise<MyRecord> {
  return await firstValueFrom(this._httpClient.get<MyRecord>(...url...);
}