Angular - Configure application environments

You might have deployed the Angular application on different environments like staging, production etc. Each environment will need specific default configuration settings. These default settings may apply to the various builder target like build, serve and test.

The Angular CLI build, serve, and test commands can then replace the default file with the environment-specific file depending on the configuration name provided in the command argument.

Configure default values for specific environment

Each angular project contains src/environments/ folder, which contains the base configuration file, environment.ts. It provides the default environment settings. You can add additional environment files, such as production and staging, with settings specific to the intended environment.

For example:

myProject/src/environments
	environment.ts
	environment.prod.ts
	environment.staging.ts

The base file environment.ts, contains the default environment settings. For example:

export const environment = {
  production: false
};

The build command uses this file (environment.ts) as the build target when no environment is specified in the argument. You can add further variables as additional properties on the environment object.

For example, the following adds a new variable (apiUrl) to the default environment:

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url-default'
};

You can add more configuration files, such as environment.prod.ts. The following shows the default values for production build target:

export const environment = {
  production: true,
  apiUrl: 'http://my-api-url-production'
};

Using environment-specific variables in your app

For example you have following applicaton structure to configure build targets for production and staging environments.

src
	app
		app.component.html
		app.component.ts
	environments
		environment.ts
		environment.prod.ts
		environment.staging.ts

To use the environment configurations, your components need to import the original environments file:

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

This ensures that the applicaiton can find the configurations for specific build targets (environments) which you provided through build and serve commands. Note that, if you do not provide any environment in the command, then the default environment configuration will be used.

The following code in the component file (app.component.ts) uses the environment object with variables (production and apiUrl) defined in the configuration files above.

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs 'false' for default environment
    console.log(environment.apiUrl); // Logs 'http://my-api-url-default' for default environment
  }
  title = 'app works!';
}

References:

• Angular - Configuring application environments