1. Introduction

In almost every project we have at least two environments: development and production. Usually there is a third environment as well, the staging environment. Usually the configurations for development environment are different than of production. Each environment has different configuration properties like API endpoint URLs. The common requirement is to define these properties in different files according to the environment. Angular allows you to define different build configurations for your project for different environments like stage, test and production.

We can have different files for different environments which can have defaults for that environment. You can build your project targeted to different environments.

2. How it works

Environment specific build in Angular can be explained in following points:

• The project’s src/environments/folder contains the base configuration file, environment.ts which contains default values for the default environment.
• In the src/environments/ folder you can create additional files for the additional environments like environment.prod.ts, environment.stage.ts. For example:

└──angular-project/src/environments/
                   └──environment.ts
                   └──environment.prod.ts
                   └──environment.stage.ts

• By default the environment.ts file in a new project generated using Angular CLI looks like this:

export const environment = {
  production: false
};

You can add additional properties to the environment object like:

export const environment = {
  production: false,
  message: 'Hello dev',
  projBaseUrl: 'localhost:8080/dev/v1'
};

The file meant for the production environment could look like this:

export const environment = {
  production: false,
  message: 'Hello prod',
  projBaseUrl: 'localhost:8080/prod/v1'
};

• To use the environment configuration in your project, you import the environment.ts in component:

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

• You configure the file replacements for the environment. In the angular.json file, you specify the “replace” and “with” values to specify which file (“replace”) to be replaced with the file (“with”) according to the environment.

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

Here, src/environments/environment.ts will be replaced by src/environments/environment.prod.ts if the build is targeted for production environment.

• You run the build command with --configuration option and the target. For example:

ng build --configuration production

This will replace the src/environments/environment.ts file with the src/environments/environment.prod.ts. For staging the command would be:

ng build --configuration=staging

You can add additional configurations if required.

• You can use the environment in the component, like the following:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'angular-profile-example';
  constructor() {
    console.log(environment.production);
  }
}

• You can also configure the serve command to use the build for the specific environment:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-profile-example:build:production"
            },
            "development": {
              "browserTarget": "angular-profile-example:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

3. Running with the target environment in localhost

If you want to run your project in local with production environment defaults, you can use the following command:

ng serve --configuration production

Here, you can pass ‘staging’ and other environment if required like:

ng serve --configuration staging