How can Angular 8 access environment variables?

I would like my Angular app to access Docker environment variables while still being able to perform hot-reloading.

Using @angular-builders/custom-webpack and @angular-builders/dev-server did not help at all.

dotenv apparently does not work with Angular (only with Node apps).

===============================

Here is my Dockerfile:


FROM node:12.10.0

ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -

RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'

RUN apt-get update && apt-get install -yq google-chrome-stable

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH
ENV API_BASE=${API_BASE}

COPY package.json /app/package.json

RUN npm install

RUN npm install -g @angular/[email protected]

COPY . /app

EXPOSE 4200 49153

CMD ng serve --host 0.0.0.0

Here is my docker-compose.yml file:


version: '3.7'

services:
  web:
    container_name: myapp-fe-container
    build:
      context: .
      dockerfile: Dockerfile
    image: myapp-fe-image
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '4200:4200'
      - '49153:49153'
    environment:
      - CHOKIDAR_USEPOLLING=true

I need to pass api endpoints to docker-compose.yml based on the environment in which it is running. Any suggestions?

Source: StackOverflow