Using Config File in Angular App

To use a configuration file in an Angular project, do these steps below. By default, an Angular project uses 'environments' folder name to put the config files.

First, create environment.ts for development or environment.prod.ts for production then add the config values:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiBaseUrl: 'https://your-dev-url/'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiBaseUrl: 'https://your-production-url/'
};

Then we can use the config variable anywhere in our project:

import { environment } from '../../environments/environment'; // import the config files

. . .

private webApiUrl = environment.apiBaseUrl; // use environment.VARIABLE_NAME to refer to a config variable

Using 'ng-serve' will use the dev value, while 'ng build --prod' will use the production value.