environment.ts in Angular: Configuration the Right Way

In Angular development, managing configuration for different environments (development, staging, production, etc.) is a common requirement. Fortunately, Angular provides a built-in and elegant solution: the environment.ts system.

This article explores what the environment.ts file is, how Angular uses it under the hood, and how you can structure and scale it for real-world applications.

What is environment.ts?

The environment.ts file in Angular is used to define environment-specific variables — such as API endpoints, feature flags, or application metadata — outside of your component or service logic.

When you initialize a new Angular project using the CLI, it generates the following default files

src/

├── environments/

│ ├── environment.ts ← development

│ └── environment.prod.ts ← production

These files are TypeScript modules that export a simple object named environment

environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com',
};

How Does Angular Use These Files?

The key to environment replacement lies in the Angular build system (Webpack under the hood). The angular.json file configures file replacements for different build targets.

angular.json
"configurations": {
  "production": {
      "fileReplacements": [{
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
      }]
  }
}

When you run:

bash
ng build --configuration production

Angular replaces all imports of environment.ts with environment.prod.ts. This ensures your production build is using the correct values (e.g., secure API endpoints, analytics tokens, or feature toggles).

How to Use environment in Your App

Import it wherever you need access to environment-specific values:

import { environment } from '../environments/environment';
...
console.log(environment.apiUrl);

Adding Custom Environments (Staging, QA, etc.)

You can define as many environments as you need.

Step 1: Create a new file

environment.staging.ts
export const environment = {
  production: false,
  apiUrl: 'https://staging-api.example.com',
  featureFlag: true,
};

Step 2: Add a new configuration in angular.json

angular.json
"configurations": {
  "staging": {
      "fileReplacements": [{
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
      }]
  }
}

Step 3: Build with the custom configuration 

bash
ng build --configuration staging

Alternatives: Runtime Configuration

In some projects, you may want to inject values at runtime (e.g., from a config.json hosted on your server). This decouples environment config from your build and can be changed without re-deploying.

A common strategy is to load a JSON config before bootstrap:

main.ts
fetch('/assets/config.json')
  .then((response) => response.json())
  .then((config) => {
    platformBrowserDynamic([
      { provide: APP_CONFIG, useValue: config }
    ]).bootstrapModule(AppModule);
  });

Conclusion

The environment.ts system in Angular is a powerful way to manage per-environment configuration. It’s simple, efficient, and tightly integrated with the Angular CLI. As your app grows, adopting good practices around environments ensures better separation of concerns, easier deployments, and fewer bugs.