Environment Configuration

Manage configuration across development and production builds using Angular's environment files.

Environment Files

Angular CLI projects generate a pair of environment files by default, holding configuration values that differ between development and production.

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

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

Build-Time File Replacement

Rather than reading an environment variable at runtime, Angular's build system swaps the entire environment.ts file for environment.prod.ts at build time, configured in angular.json.

// angular.json (relevant excerpt)
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

Using Environment Values

import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = environment.apiUrl;
}

A Plain Angular App Has No True Secrets

Everything in environment.ts Ships to the Browser

Since a client-rendered Angular app runs entirely in the browser, any value in an environment file — even a "production" one — is visible to anyone who inspects the app's JavaScript. Real secrets (API keys, database credentials) belong only on a backend server, never in Angular's own code.

FAQs

Can I have more than two environment files, like staging?

Yes — you can add additional environment files and matching build configurations for as many deployment targets as you need.

Does this change with Angular Universal (SSR)?

A server-rendered app can read genuinely server-only environment variables (via process.env) inside its server-side code, since that code never ships to the browser — a meaningfully different situation from a plain client-rendered SPA.

Summary

Angular swaps environment files at build time rather than reading variables at runtime, and a plain client-rendered app has no way to keep a value truly secret. Next, you'll deploy a finished Angular app to production.

Next Lesson →