How to Use Environment Files in Angular for Configuration

In Angular, use environment.ts files to store configuration variables for different environments like development and production. These files are placed in the src/environments folder and Angular replaces them automatically during build based on the target environment using the fileReplacements setting in angular.json.

Syntax

Angular uses separate environment files for different build targets. The main parts are:

• environment.ts: Default environment file for development.
• environment.prod.ts: Environment file for production.
• fileReplacements: In angular.json, this tells Angular which file to replace during build.
• Import the environment object in your code to access variables.

typescript

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

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

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

Example

This example shows how to use environment variables in a component to display the API URL and check if the app is in production mode.

typescript

/* src/app/app.component.ts */
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular Environment Example</h1>
    <p>API URL: {{ apiUrl }}</p>
    <p>Production Mode: {{ isProd }}</p>
  `
})
export class AppComponent {
  apiUrl = environment.apiUrl;
  isProd = environment.production;
}

Output

<h1>Angular Environment Example</h1>
<p>API URL: http://localhost:3000/api</p>
<p>Production Mode: false</p>

Common Pitfalls

Common mistakes when using environment files in Angular include:

• Not setting up fileReplacements in angular.json, so the wrong environment file is used.
• Importing environment files incorrectly or from wrong paths.
• Trying to change environment variables at runtime (they are replaced at build time).
• Forgetting to rebuild the app after changing environment files.

typescript

/* Wrong import example - will cause errors or use wrong config */
import { environment } from './environment'; // Missing 's' in 'environments'

/* Correct import example */
import { environment } from '../environments/environment';

Quick Reference

Summary tips for using Angular environment files:

• Keep all environment files in src/environments.
• Use fileReplacements in angular.json to swap files on build.
• Import environment from ../environments/environment in your code.
• Environment variables are static and replaced at build time.
• Rebuild your app after any environment file changes.

Key Takeaways

Use separate environment files in Angular to manage settings for different build targets.

Configure fileReplacements in angular.json to swap environment files automatically.

Import the environment object to access variables in your app code.

Environment variables are replaced at build time and cannot be changed at runtime.

Always rebuild your Angular app after modifying environment files to apply changes.