<p>I have an app written in angular4,
I am running on production and sandbox,</p>

<p>I create an image and then deploy on kubernetes</p>

<p>I have some environment variables differnt to sandbox and production , currently I build two differnt images one for sandbox and one for 
production:</p>

<p>environments under <code>src/envirnments</code>:</p>

<p><strong>environment.prod.ts</strong></p>

<pre><code>export const environment = {
  production: true,
  server_url: 'https://api.example.com/app/',
};
</code></pre>

<p><strong>environment.sandbox.ts</strong></p>

<pre><code>export const environment = {
  production: false,
  server_url: 'https://api-sandbox.example.com/app/',
};
</code></pre>

<p>building image:</p>

<p><strong>production</strong> : <code>ng build --prod</code></p>

<p><strong>sandbox</strong>:
<code>ng build--prod --env=sandbox</code></p>

<p>now, how can I use external environment varibales instead? 
somthing like <code>applicatoion.getEnvirnment('server_url')</code>, like this I dont need to create an image for each environment?</p>

<p>this is my <code>deployment.yaml</code>:</p>

<pre><code>apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
  namespace: production
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        ports:
        - containerPort: 80
        env:
        - name: SERVER_URL
          value: https://api.example.com
</code></pre>

<p>here is my dockerfile:</p>

<pre><code>FROM nginx
COPY dist /usr/share/nginx/html
EXPOSE 80
EXPOSE 443
</code></pre>

<p>building the image:</p>

<pre><code>ng build --prod --env=sandbox
docker build --rm -t ${REGISTRY}/${CONTAINER}:${TAG} .
</code></pre>

<p>I added  the environment variable to the deployment and I want the app to take the value from there </p>

<p>alternativly you can read from  local config json , and then use volumes,
 having seperate config map for each of you environments <a href="https://stackoverflow.com/questions/43275995/angular4-how-do-access-local-json">see</a></p>

<p>under <code>src/assets/config</code> put the config json,</p>

<p>in your code read the url from the config file:</p>

<pre><code>private getConfigJSONFile() {
     return this.http.get("/assets/config/env-vars.json").map((res:any) =&gt; res.json())
   }
</code></pre>

<p>now create the config on kubernetes:</p>

<p>here is the config file:</p>

<p><strong>configs/env-variables.json</strong></p>

<pre><code>{
  "api_server_url": "https://api.example.com"
}
</code></pre>

<p>create the config</p>

<pre><code>kubectl create configmap angular-env-vars --from-file=env-vars.json=configs/env-variables.json
</code></pre>

<p>use volumes in your deployment:</p>

<pre><code>apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: angular-web-app
spec:
  replicas: 1
  revisionHistoryLimit: 1
  strategy:
      type: RollingUpdate
  template:
    metadata:
      labels:
        app: angular-web-app
    spec:
      containers:
      - name: angular-web-app
        image: us.gcr.io/my-com/angular-web-app:06.01.2018
        volumeMounts:
        - name: env-vars
          mountPath: /usr/share/nginx/html/assets/config
        ports:
        - containerPort: 80
      volumes:
      - name: env-vars
        configMap:
          name: angular-env-vars
</code></pre>
