How do I externalize property values for an Angular 7 application?

I have an Angular 7 application where the app.module.ts files looks like the following. Note that in this example, there are 2 modules with each having 1 key whose value needs to be externalized. By externalized, I mean the values should be acquired from the environment at runtime.

 declarations: [ ... ],
 imports: [
  SomeModule.forRoot({ apiKey1: "needs to be externalized" }),
  AnotherModule.forRoot({ apiKey2: "needs to also be externalized" })
 providers: [ ... ],
 bootstrap: [AppComponent]
export class AppModule { }

What I do is build this application (e.g. ng build and then containerize it using Docker). At deployment time, the DevOps person wants to run the docker container as follows.

docker run -e API_KEY_1='somekey' -e API_KEY_2='anotherkey' -p 80:80 my-container:production

Note that API_KEY_1 should map to apiKey1 and API_KEY_2 should map to apiKey2.

Is there any disciplined way of externalizing values for an Angular application?

I thought about writing a helper script to do string substitution against the file, but I think this approach is not very disciplined (as the transpiled Angular app files are obfuscated and minified). The script would run at container startup, read the environment variables (key and value), and then look at the files to replace the old values with the ones from the environment.

Eventually, the Angular app will be orchestrated with Kubernetes. I’m wondering if there’s anything there that might help or influence how to externalize the values in a best practice way.

Any help is appreciated.

Source: StackOverflow