Angular Docker image on multiple environments

How to build Angular docker image which can be deployed anywhere.

Build Once, Deploy Anywhere

The problem described here:

• M: Multiple environments with Angular and Docker
• GH: Load configuration from external file

Main points

Load configuration from external file:

src\app\core\app-load\app-load.module.ts
src\app\core\app-load\app-load.service.ts
src\app\core\models\app-settings.ts

src\assets\env-config.json
src\assets\env-config.json.template

Docker - replace configuration on container run:

...

COPY ./.docker/entrypoint.sh /entrypoint.sh

RUN chmod +x /entrypoint.sh

ENTRYPOINT ["bash", "/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

Replace tokens in the env-config.json.template file with those from environment variables passed on runtime in .docker\tools\docker-run.bat

.docker\entrypoint.sh

Docker tools:

.docker\tools\docker-build.bat
.docker\tools\docker-run.bat

Resources

• GH: Load configuration from external file
• M: Multiple environments with Angular and Docker
• Angular 4 Tutorial – Run Code During App Initialization
• Deploying Angular 4 Apps with Environment-Specific Info
• GH: Microservices Demo App
• SO: configure Angular 2 Webpack App in Docker container environment specific

Other resources

• M: Angular in Docker with Nginx, supporting configurations / environments
• M: Your Angular apps as Docker containers
• Angular app in docker
• M: Create efficient Angular Docker images with Multi Stage Builds