Multi-environment setup in Angular

We all know that we can create Angular applications using Angular CLI and it provides us with various features such as bootstrapping an Angular application and managing its entire lifecycle.

One of the features it provides is the use of multiple environment files for an angular application. We can setup multiple environment files for instance, once for development environment, one for QA, one for production.

                   

Configurations:

By default, Angular CLI creates two environment files within the environments folder : environment.ts and environment.prod.ts.

environment.ts is the configuration file for used for the development environment where we specify certain settings or values.

environment.prod.ts is the configuration file for used for the production environment which the Angular CLI uses on the production server.

Let’s see how these files look like –

//environment.ts

export const environment = {

  production: false

};

 

//environment.prod.ts

export const environment = {

  production: true

};

We have the liberty to create more environment files for different environments for example, we can define one more environment, let’s say for QA.

Let’s create one more environment file for QA and give it a name as environment.qa.ts.

Also, in order for these environment files to work properly, we need to make some changes or add some configuration settings in the angular.json file of our angular application as shown below –

// angular.json

configurations": {

    "production" {...} //existing configuration present for production environment,  

    "qa": {

        "fileReplacements": [

            {

                "replace": "src/environments/environment.ts",

                "with": "src/environments/environment.qa.ts"

            }

        ]

    }

}

   

 

Also, we need to update the serve section on angular.json file as shown below –

"serve": {

    "builder": "@angular-devkit/build-angular:dev-server",

    "options": {

        "browserTarget": ":build"

    },

    "configurations": {

        "production": ... //existing configuration present for production environment

        "qa": {

            "browserTarget": ":build:qa"

        }

    }

},

 

Default Values:

All the environment files, the angular application contains has some values which might be common across all the environments, so what we do is we create a default environment file with the name environment.defaults.ts and providing some default values inside it which can be used across all the different environments as shown below –

// environment.defaults.ts

export const environment = {

   production: false,

   log: true,

   flags: {

      useNewHeader: true

   }

}

 

Please note that all the environments files have to be merged with the object defaultEnvironment, except the environment.ts file as shown below –

// environment.qa.ts

import { environment as defaultEnvironment } from './environment.defaults.ts';

export const environment = {

    ...defaultEnvironment,

    production: true

}

 

Let’s say we don’t want logging feature in our production environment, so we do the below changes inside our environment.production.ts file as shown below –

// environment.prod.ts

import { environment as defaultEnvironment } from './environment.defaults.ts';

export const environment = {

    ...defaultEnvironment,

    production: true,

    log: false,

    flags: {

      useNewHeader: false

   }

}

 

Addition of NPM scripts:

Next, let’s setup the NPM scripts for running our application in the package.json file as shown below –

We will be using a parameter here, which has the name configuration, in short c.

The command for the same is --configuration or -c.

-c is used to specify the environment

--port is used to assign a port number for all the different environments

 

// package.json

{

...

"scripts": {

   "start:qa": "ng serve -c=qa --port=4202"

   ...

   }

}

 

Now, in order to run application for one particular environment, we use the below command –

npm run start:qa --aot // We usually run QA configuration in AOT (Ahead Of Time) mode

 

Using an Alias while importing the environment files:

It’s always a better idea to use alias while importing the environment files inside our component files. For that, we need to add the below setting inside our tsconfig.json file as shown below –

"paths": {

    "@environment": ["./src/environments/environment.ts"]

}

 

Let’s import the environment file inside our component as shown below –

import { Component } from '@angular/core';

import { environment } from '@environment';

@Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

})

export class AppComponent {

    environment = environment;

}

 

Using a proxy:

Since we know that our environments run on different address, we have to define correct address for each of our environments. For this purpose, we create a proxy class to setup the proxy for each of our environments.

We create a folder with the name proxy and create a file inside that folder with the name -proxy.config.json (env stands for the environment name such as prod, qa) as shown below –

  "/api": {

    "target": "http://my.qa.env.com",

    "secure": false,

    "pathRewrite": {

      "^/api": ""

    }

  }

}

And now, we add the proxy config to our package.json file as shown below –

package.json

{

...

"scripts": {

      "start:qa": "ng serve -c=qa --port=4202 --proxy-config=proxy/qa-proxy.conf.json"

   ...

   }

}

 

I hope you might have got the understanding of how-to setup multiple environment files for different environments in your angular application.