How do environment files work in Angular, and how do you use different values for development and production?

Angular projects typically include separate environment files, such as environment.ts for development and environment.prod.ts for production, each exporting the same variable names but with different values, like a different API address. The build process automatically swaps in the correct file based on the configuration you specify.

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

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