NgxConfig

Angular library for easy configuration loading from json file/files and using in in app. It is important to note that files will be merged in the same order as they are passed in url array. For example, if there is 2 config files, 1st file in array will be overriden with 2nd config (of course it happens only if configurations overlap).

Examples

Import module passing configuration urls to it

There are multiple ways for using library with configuration. Easiest way is to import module with loadConfig method and pass array with file urls to be loaded.

// app.module.ts (or any other root module where you want to import this config module)
...
import { ConfigModule } from 'ngx-config';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
        ConfigModule.loadConfig(["assets/config.local.json", "assets/config-overrides.local.json"])
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

When using this method, you need to call ConfigService.loadAppConfig method. It makes sense to call this method from APP_INITIALIZER, but you can do it wherever you like.

PS. It is also possible to pass urls straight to ConfigService.loadAppConfig method. In that case you don't need to import ConfigModule in your app.

Load config before app starts and use injection token

There is occasions when you want configuration to be loaded already before application bootstrapping - in that case you need to modify main.ts file and use global js window object. This method is usefull when you are using injection tokens and you need to use configuration in provider factories. When creating this method, couldn't find any better way to access config from json file in provider factories.

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { ConfigHelper, CONFIG_TOKEN } from 'ngx-config';

const configs = ["assets/config.local.json", "assets/config-overrides.local.json"];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ConfigHelper.fetchConfigs(configs).then((data: any) => {
  const mergedConfig = ConfigHelper.deepMerge(...data);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (window as any)[CONFIG_TOKEN] = mergedConfig;
  platformBrowserDynamic().bootstrapModule(AppModule, {})
    .catch(err => console.error(err));
})

When you have added configuration to window object, you can use injection token from your module to provide configuration for config service.

// app.module.ts
...
import { CONFIG_TOKEN } from 'ngx-config';
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
  ],
  providers: [
    {
      provide: CONFIG_TOKEN,
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      useFactory: ()=> (window as any)[CONFIG_TOKEN]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

When these steps are done, you can inject ConfigService in your application and use provided methods for config.