Angular, dynamic forRoot value (based on api) in app module

Question

I need to provide a dynamic value into ngModule of app module, fetched by an api (api fetches configuration lets say)

So I have the below module where I need to update the rootUrl based on configuration. I need to call the /config api and get the result and then pass it in. However, I tried with multiple ways and it was not successful. Is there a solution to that?

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    ApiModule.forRoot({rootUrl: config.url})   <-- HERE
  ],
  providers: [
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: (config: AppConfig) => () => config.load(),
      deps: [AppConfig],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

So I've found another way of doing what i needed. The purpose of this one was to initialise the base url of my endpoint based on the configuration. This can be also achieved using an interceptor to overwrite the request url