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.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to concatenate a strings in JavaScript?
How to concatenate a strings in JavaScript?

How to Use Bootstrap Dropdown in React the Right Way – with CoreUI
How to Use Bootstrap Dropdown in React the Right Way – with CoreUI

What is Double Question Mark in JavaScript?
What is Double Question Mark in JavaScript?

How to Add a Tab in HTML
How to Add a Tab in HTML

Answers by CoreUI Core Team