Name: Setting up multiple environments in Angular app
Rating: 1.2 (9143 reviews)
Author: manthanank

Setting up multiple environments in Angular app

Manthan Ankolekar - Apr 11 '23 -

- Dev Community

Environments

Development
Testing
Staging
Production

Configure environments

ng generate environments

In environment.ts

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

In environment.prod.ts

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

In environment.development.ts

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

In environment.staging.ts

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

In angular.json add

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

"configurations": {
  "production": {
    "browserTarget": "projectName:build:production"
  },
  "stage": {
    "browserTarget": "projectName:build:stage"
  },
  "testing": {
    "browserTarget": "projectName:build:testing"
  }
}

Serve commands

ng serve
ng serve --configuration=testing
ng serve --configuration=stage
ng serve --prod

Build Commands

ng build
ng build --configuration=testing
ng build --configuration=stage
ng build --prod