title: Passing environment variables into Angular Docker Container
body: <p>I've got a set up using this tutorial: <a href="https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-docker/" rel="nofollow noreferrer">https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-docker/</a> to pass docker environment variables into a docker container.</p>
  <p>I am using an angular custom webpack for this.</p>
  <p>However, when I open my docker container and open the app, it seems my docker variables are not passed into the angular container.</p>
  <p>How can I correctly pass docker env variables into my Angular App?</p>
  <p>Here is my Dockerfile for the angular application:</p>
  <pre><code>FROM node:12 AS compile-image
  
  WORKDIR /opt/ng
  
  COPY package.json ./
  
  RUN npm install
  
  COPY . ./
  
  RUN node_modules/.bin/ng build --prod
  
  FROM nginx
  
  VOLUME [ &quot;/usr/share/nginx/html/data&quot; ]
  
  WORKDIR /
  
  COPY --from=compile-image /opt/ng/dist/YomiApp /usr/share/nginx/html
  </code></pre>
  <p>and my docker-compose.yml that I use to open up the Angular container and the backend server for the app:</p>
  <pre><code>version: &quot;3&quot;
  
  services:
    webapp:
      image: nlanson/myAngularImage:latest
      environment:
        TZ: Australia/Sydney
        DATABASE_URI: &quot;http://localhost:6969&quot;
      volumes:
        - &quot;./data:/usr/share/nginx/html/data&quot; #Data is mounted to the directory where the Angular App is running.
      ports:
        - &quot;8080:80&quot;
      container_name: webapp
    server:
      image: nlanson/backendImage:latest
      environment:
        TZ: Australia/Sydney
      volumes:
        - &quot;./data:/data&quot;
      ports:
        - &quot;6969:6969&quot;
      container_name: server
      
  </code></pre>
  <p>Here is my custom-webpack.config.js file where my environment variables are listed:</p>
  <pre><code>const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        $ENV: {
          DATABASE_URI: JSON.stringify(process.env.DATABASE_URI),
        }
      })
    ]
  };
  </code></pre>
  <p>and the service that uses the environment variable:</p>
  <pre><code>import { environment } from '../../environments/environment'
  
  @Injectable({
      providedIn:root
  })
  export class DatabaseService {
      URI = environment.DATABASE_URI
  }
  </code></pre>
  <p>Maybe it is because the build for my Angular Image is multi stage??</p>
  <p>Thanks</p>