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'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! 🚢