Inject env variables from docker-compose into Angular4 app

One way to achieve this is to extract all configuration into a separate angular service that is responsible of serving configuration. Inside this new service hardcode these values to env placeholders. For example:

apiUrl = $API_URL

Now change the CMD inside your DockerFile to run a script startup.sh.

Create this script and add it into the Docker Image using ADD startup.sh startup.sh.

Inside startup.sh you can envoke envsubst < "path-to-service-file" > "path-to-service-file" to substitute the placeholder with the env variable value. After envsubst command start your angular application

Thank you yamenK for you solution with the bash script and Tarun for a similar solution.

I found another way to avoid the need of the information about the Api Url in the angular app.I added an nginx web server to my docker-compose and link it to my api and the app.

nginx:build: ./nginx...links:  - app  - api

In the nginx default.conf I use multiple locations to route the requests.

location /api {proxy_pass http://api:6000/api;....}location / {proxy_pass http://angular:4200/;...}

Then in the angular app I use relative urls.