Angular 19 ApplicationConfig use Configuration in factory

In GitOp I want to replace config.json for each environment and with this internal app I want to keep it as simple as possible (e.g. no ngrx)

My problem is that config.json is loaded in a provideAppInitializer, in the next factory I want to use it to set basePath for generated openapi spec configuration, but is undefined.

  provideAppInitializer(()=> inject(ConfigService).getConfig$()),
  {
      provide: Configuration,
      deps: [ConfigService],
      useFactory: (configService: ConfigService) =>
        makeEnvironmentProviders([{ provide: Configuration, useValue: new Configuration({ basePath: configService.get().maintenanceApi.basePath }) }])

  },

The Service looks like this

    getConfig$(): Promise<void> {
    return lastValueFrom(this.http.get<Config>('/assets/config.json').pipe(
          tap(c => {this.config = c; console.log("loaded config", c) }),
          take(1)
        )
    ).then(() => {});
  }

  get(): Config {
    return this.config;
  }

When I run this code I see the console log resolve BEFORE the undefined error, which keeps me wondering what goes wrong.

Please change your code, so that you do the initialization inside the service and your provider just references the object you want. The object.assign applies the value, but the memory reference remains the same, so the values will be available.

  configuration = {
    
  }
  getConfig$(): Promise<void> {
    return lastValueFrom(this.http.get<Config>('/assets/config.json').pipe(
          tap(c => {
            this.config = c;  
            Object.assign(this.configuration, new Configuration({ basePath: c?.maintenanceApi?.basePath }));  
            console.log("loaded config", c); 
          }),
          take(1)
        )
    ).then(() => {});
  }

  getConfiguration(): Config {
    return this.configuration;
  }

Then just reference this object in your providers array.

  provideAppInitializer(()=> inject(ConfigService).getConfig$()),
  {
      provide: Configuration,
      deps: [ConfigService],
      useFactory: (configService: ConfigService) =>
        makeEnvironmentProviders([{ provide: Configuration, useValue: configService.getConfiguration() }])

  },