Runtime configuration for Angular apps

angular-ssr.js

loadConfig(): Promise<void> {
        if (isPlatformBrowser(this.platformId)) {
            return this.http
            ...
        }
 }

app-initializer.js

import { NgModule, APP_INITIALIZER } from '@angular/core';

export function initConfig(appConfig: AppConfigService) {
    return () => appConfig.loadConfig();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [AppConfigService],
      multi: true,
    },
  ],
  ...
})

app.config.js

{
    "appInsightsKey": ""
}

appconfig-usage.js

export class ApplicationInsightsService {
  appInsights: ApplicationInsights;
  
  constructor(private appConfigService: AppConfigService) {
    const appInsightsKey = this.appConfigService.getConfig().appInsightsKey;
    ...
  }
  ...
}

AppConfigService.js

//AppConfig.d.ts
export interface AppConfig {
    appInsightsKey: string;
}

//AppConfigService.ts
@Injectable()
export class AppConfigService {
    private config: AppConfig;
    loaded = false;
    constructor(private http: HttpClient) {}
    loadConfig(): Promise<void> {
        return this.http
            .get<AppConfig>('/assets/app.config.json')
            .toPromise()
            .then(data => {
                this.config = data;
                this.loaded = true;
            });
    }
    
    getConfig(): AppConfig {
        return this.config;
    }
}

configmap.yaml

data:
  app.config.json: |-
{{ toJson .Values.appConfigs | indent 4 }}

deployment.yaml

template:
  ...
    spec:
    ...
    containers:
      ...
        volumeMounts:
        - name: "{{ include "< APP-NAME >.fullname" . }}-config"
          mountPath: "/var/www/assets/app.config.json"
          subPath: app.config.json
          readOnly: true
    volumes: 
    - name: "{{ include "< APP-NAME >.fullname" . }}-config"
      configMap:
        name: "{{ include "< APP-NAME >.fullname" . }}-config"

env-file-replacement.json

"configurations": {
  "test-env": {
    "fileReplacements": [
      {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.test.ts"
      }
    ],
  },
  ...
}

environment-files.js

//environment.dev.ts
export const environment = {
  appInsightKey: 'A Key',
};

//environment.test.ts
export const environment = {
  appInsightKey: 'B Key',
};

//environment.prod.ts
export const environment = {
  appInsightKey: 'C Key',
};

Values.yaml

// Values.yaml
appConfigs:
    appInsightsKey: ''