A complete example demonstrating how to inject environment variables into Angular applications at runtime using Docker, eliminating the need to rebuild your app for different environments.

Angular Docker TypeScript License: MIT

Angular's default environment system bakes configuration values into JavaScript bundles during build time. This means:

• ❌ Rebuilding required for different environments
• ❌ Can't change configs after deployment
• ❌ Makes container deployments inflexible
• ❌ Same image can't work across multiple environments

This project demonstrates a Docker-based approach that:

• ✅ Runtime Configuration: Inject variables when container starts
• ✅ Zero Rebuilds: Same build works across all environments
• ✅ Docker Native: Perfect for Kubernetes, Docker Swarm, etc.
• ✅ Fallback Safe: Sensible defaults if variables aren't provided
• ✅ Dev Friendly: No changes to your development workflow

1. Template System: Uses env-config.template.js with placeholders
2. Startup Script: Replaces placeholders with environment variables at runtime
3. Angular Service: Intelligently chooses between build-time and runtime config
4. Global Config: Exposes configuration via window.APP_CONFIG

• Node.js 18+
• Docker
• Angular CLI 19+

# Clone the repository
git clone https://github.com/timothydodd/angular-dynamic-variables.git
cd angular-dynamic-variables
# Navigate to the Angular app directory
cd angular-dynamic-variables
# Install dependencies
npm install
# Run in development mode
ng serve
# Visit http://localhost:4200

# Build the Docker image
docker build -t angular-dynamic-vars .
# Run with environment variables
docker run -p 8080:80 \
 -e API_URL="https://api.production.com" \
 -e FAV_COLOR="blue" \
 -e FAV_CATCH_PHRASE="Hello Production!" \
 angular-dynamic-vars
# Visit http://localhost:8080

├── angular-dynamic-variables/ # Angular application directory
│ ├── src/
│ │ ├── app/
│ │ │ └── _services/
│ │ │ └── config.service.ts # Configuration service
│ │ ├── environments/
│ │ │ ├── environment.ts # Development config
│ │ │ └── environment.prod.ts # Production config
│ │ └── env-config.js # Runtime config file
│ ├── angular.json # Angular CLI configuration
│ └── package.json # Dependencies
├── env-config.template.js # Template with placeholders
├── generate-env-config.sh # Startup script
└── Dockerfile # Multi-stage Docker build

The following environment variables are supported:

1. Add to template (env-config.template.js):

myNewVar: '${MY_NEW_VAR}',

2. Update startup script (generate-env-config.sh):

ENV_VARS="API_URL FAV_COLOR FAV_CATCH_PHRASE MY_NEW_VAR"

3. Update service (config.service.ts):

get myNewVar(): string {
 return this.config.myNewVar;
}

• Uses environment.ts values
• No Docker required
• Hot reload works normally

• Uses environment.prod.ts as fallback
• Overrides with window.APP_CONFIG values
• Requires Docker for runtime variable injection

1. Development: environment.ts values
2. Production: environment.prod.ts fallbacks
3. Runtime: window.APP_CONFIG overrides (production only)

1. Angular builds normally with ng build --configuration production
2. env-config.js is copied to build output (not processed/minified)
3. Docker startup script replaces template placeholders
4. Generated config file overwrites the build output version

• Stage 1: Node.js container builds Angular app
• Stage 2: Nginx container serves static files + handles runtime config

version: '3.8'
services:
 frontend:
 build: .
 ports:
 - "8080:80"
 environment:
 - API_URL=https://api.example.com
 - FAV_COLOR=green
 - FAV_CATCH_PHRASE=Docker Compose Rocks!

This repository accompanies the blog post: "Dynamic Environment Variables in Angular: A Docker-Ready Solution"

Read the full tutorial here →

1. Check container logs: docker logs <container-name>
2. Verify environment variables are set correctly
3. Ensure generate-env-config.sh has execute permissions
4. Check env-config.js was generated properly in container

1. Ensure Angular CLI version compatibility
2. Check Node.js version (18+ required)
3. Verify all dependencies are installed

This project is licensed under the MIT License

If this project helped you, please give it a ⭐ on GitHub!

Making Angular deployments more flexible, one container at a time! 🚢