Use multiple environment files

Question

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?

Possible duplicate of how to build angular project with different environment — edkeveked
– edkeveked, Commented Sep 9, 2019 at 18:33

Amit Beckenstein · Accepted Answer · 2019-09-09 18:35:40Z

2

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).

edited Sep 9, 2019 at 18:35

answered Sep 9, 2019 at 18:31

Amit Beckenstein

1,33013 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Moura Over a year ago

I see. One thing that confuses me is the use of "production: true / false" on the environment files. What does it do?

Amit Beckenstein Over a year ago

@MiguelMoura There's no such "production" property defined under "configurations.<your configuration>" according to the angular.json schema. What do you mean exactly? Are you referencing the --prod argument for ng build? If so, it's just a shortcut of --configuration=production, so if you have no configuration named "production" under "projects.<your project name>.architect.build.configurations", running ng build --prod won't work.

Collectives™ on Stack Overflow

Use multiple environment files

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related