<p>I configured an automatic build of my Angular 6 app and deployment in Kubernetes each time is push to my code repository (Google Cloud Repository).</p>

<p>Dev environment variables are classically store in a environment.ts file like this:</p>

<pre><code>export const environment = {
  production: false,
  api_key: "my_dev_api_key"
};
</code></pre>

<p>But I don't want to put my Prod secrets in my repository so I figured I could use Kubernetes secrets.</p>

<p>So, I create a secret in Kubernetes:</p>

<pre><code>kubectl create secret generic literal-token --from-literal api_key=my_prod_api_key
</code></pre>

<p>But how to use it in my Angular app?</p>

Manuel RODRIGUEZ
<p>Nevertheless what you do, your Angular app is a <em>client</em> application i.e. the user's browser downloads the source code of the app (a bunch of CSS/JS/HTML files, images etc.) and it executes it on the user's machine. So you can't hide anything like you do when implementing a <em>client/server</em> app. In client/server applications all the secrets will reside in the server part. If you put the secret in a k8s secret you will not commit it in the repository, but you will expose it to all of your users anyway.</p>

<p>If you still want to populate a configuration based on environment variables (which is a legit use-case), I've seen and used the following approach. The app is Angular 6 and is served to the browser by an <code>nginx</code> server. The startup script in the docker container is a bit odd and looks similar to those lines below:</p>

<pre><code>envsubst &lt; /usr/share/nginx/html/assets/config.json.tpl &gt; /usr/share/nginx/html/assets/config.json
rm /usr/share/nginx/html/assets/config.json.tpl
echo "Configuration:"
cat /usr/share/nginx/html/assets/config.json
nginx -g 'daemon off;'
</code></pre>

<p>As you see we've used <code>envsubst</code> to substitute a config template in the assets folder. The <code>config.json.tpl</code> may look like this:</p>

<pre><code>{
  "apiUrl": "${API_URL}"
}
</code></pre>

<p><code>envsubst</code> will substitute the environment variables with their real values and you will have a valid JSON configuration snippet in your assets. Then <code>nginx</code> will then startup.</p>
