How to use Angular environments for production and dev
Managing separate configurations for development and production is crucial for Angular applications with different API endpoints, feature flags, and debug settings. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve configured production deployments for countless enterprise applications. The most effective solution is to use Angular’s environment file replacement system that automatically swaps configurations during build. This approach ensures clean separation between environments without manual configuration changes.
Use environment files with Angular CLI build configurations for dev and production.
// src/environments/environment.ts (development)
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api',
enableDebug: true,
version: '1.0.0-dev'
}
// src/environments/environment.prod.ts (production)
export const environment = {
production: true,
apiUrl: 'https://api.example.com',
enableDebug: false,
version: '1.0.0'
}
# Build for development (uses environment.ts)
ng build
# Build for production (uses environment.prod.ts)
ng build --configuration production
# Serve with production config
ng serve --configuration production
Angular CLI automatically replaces imports of environment.ts with environment.prod.ts when building with the production configuration. This replacement happens at build time through configuration in angular.json. Both files export the same interface, ensuring type safety. The development server uses environment.ts by default, while production builds use environment.prod.ts.
Best Practice Note
This is the same environment management we use in CoreUI Angular projects for seamless deployments. Create additional environment files for staging or testing environments by adding them to angular.json configurations. Never commit sensitive credentials to environment files - use environment variables injected during CI/CD builds instead.



