DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Setting up multiple environments in Angular app

#angular

Environments

  1. Development
  2. Testing
  3. Staging
  4. Production

Configure environments

ng generate environments
Enter fullscreen mode Exit fullscreen mode

In environment.ts

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

In environment.prod.ts

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

In environment.development.ts

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

In environment.staging.ts

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

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"
            }
          ]
        }
      }
    ...
    }
    ...
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode 
"configurations": {
  "production": {
    "browserTarget": "projectName:build:production"
  },
  "stage": {
    "browserTarget": "projectName:build:stage"
  },
  "testing": {
    "browserTarget": "projectName:build:testing"
  }
}
Enter fullscreen mode Exit fullscreen mode

Serve commands

ng serve
ng serve --configuration=testing
ng serve --configuration=stage
ng serve --prod
Enter fullscreen mode Exit fullscreen mode

Build Commands

ng build
ng build --configuration=testing
ng build --configuration=stage
ng build --prod
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

willduru1234 profile image

technical co-founder

WILL DURU -

skie1997 profile image

How to configure gradual change colors for discrete data in VChart?

Siji Chen -

akshat0610 profile image

Day 10 of 30 of JavaScript

Akshat Sharma -

skie1997 profile image

How does react-vchart achieve on-demand loading?

Siji Chen -