CODEWITHSUNDEEP
angularangular7
Miguel Moura
Miguel Moura

Reputation: 39504

Use multiple environment files

On an Angular 7 application I have the following environment.prod.ts file:

export const environment = {
  production: true,
  apiBaseUri: 'https://api.xyz.com'
};

I need to publish the application in 2 different machines.

And I need, for each one, two configurations: Production and Staging.

So I need to have something like the following environment files:

environment.prod.machine-1.ts
environment.prod.machine-2.ts

environment.staging.machine-1.ts
environment.staging.machine-2.ts

How should I defined these environment files?

And how to build the application?

Upvotes: 0

Views: 489

Answers (1)

Amit Beckenstein
Amit Beckenstein

Reputation: 1332

In angular.json, under "projects.<your project name>.architect.build.configurations" you can define each type of configuration per machine. Under each configuration define fileReplacements, like so:

"projects": {
  "<your project name>": {
    "architect": {
      "build": {
        "configurations": {
          "machine-1.production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.machine-1.ts"
              }
            ]
          },
          "machine-1.staging": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.staging.machine-1.ts"
              }
            ]
          },
          // same for machine 2, etc...
        }
      }
    }
  }
}

Then, to build your project using that environment, run

ng build --configuration=machine-2.staging

(or whichever other environment you want).

Upvotes: 2

Related Questions