How To Configure Multiple Environments In Angular

In Angular application by default built two environments files dev and prod. Based on the target environment, your application might have a different setup. You can configure multiple custom environments as per your need. Here, will see how to configure multiple environments like staging, beta, QA, etc…

So lets, start

Create a different environment file

We need to create several environment files as our need. Here I have created 2 files:

1. environment.stagging.ts
2. environment.beta.ts

Note: You can use the `environment.prod` file copy-paste and rename(e.g.: environment.staging.ts) and set environment variables values as per your need.

Update angular.json file

"projectName": {
  ...
  "architect": {
    "build": {
      ...
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        },
        "stagging": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.stagging.ts"
            }
          ],
          ...
        },
        "beta": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.beta.ts"
            }
          ],
          ...
        }
      }
    ...
    }
    ...
  }
  ...
}

Replicate a similar approach on the same file but a bit lower for the “serve” configurations:

"configurations": {
  "production": {
    "browserTarget": "projectName:build:production"
  },
  "stagging": {
    "browserTarget": "projectName:build:stagging"
  },
  "beta": {
    "browserTarget": "projectName:build:beta"
  }
}

and under the “e2e”:

"production": {
  "devServerTarget": "projectName:serve:production"
},
"stagging": {
  "devServerTarget": "projectName:serve:stagging"
},
"beta": {
  "devServerTarget": "projectName:serve:beta"
}

To use different environments upon serving use the following commands:
ng serve
ng serve –configuration=stagging
ng serve –configuration=beta
ng serve –prod

To use different environments upon building use the following commands:

ng build
ng build –configuration=stagging
ng build –configuration=beta
ng build –prod