15

I have a rather complex angular.json because I have multiple projects. What I would like to have is separate environment.ts files per project. Replacing the environment file when the build target is production seems to be pretty straightforward:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/private-label/redacted/environments/environment.prod.ts"
      }
    ],
  }
}

What I'm looking for is a way to do the same with the default/development configuration. The angular.json does not contain a configuration node for anything like that that I can find and so I'm not sure if it is possible and/or where to specify fileReplacements when not targeting production.

Of course, if there is a better way to handle environments per project that I'm not seeing I would also be interested in that.

Improve this question

3 Answers 3

Reset to default
11

I assume with "default/development configuration" you are referring to what is served with the ng serve command.

Option 1: replace environment files:

You can specify the fileReplacements array in the build object as well (this one is used for ng serve).

  "build": {
    "options": {
      [...]
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.development.ts"
        }
      ]      
    },
    "configurations": {
      // other - non default - configurations 
    }
  }

Option 2: specifiy default configuration:

If you want to serve an already existing configuration withng serve, you can change the serve options:

  "configurations": {
    "youConfigName": {
      // config details here
    }
  },
  [...]
  "serve": {
    "options": {
      "browserTarget": "name-of-your-app:build:youConfigName"
    }
  }

The important point is to set the build configuration target with :yourConfigName.

Both options are configured per project and therefore allow you full control.

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

Comments

5

Also, be sure to execute the right command to start/serve your app. In my case, I'm using Azure Pipelines to deploy to Azure App Service, and the command is:

enter image description here

Note that, "--configuration=production" is mandatory in order to achieve the file replacement.

I also put the "fileReplacements" section in both: "build" and "configuration" section of the angular.json file1:

enter image description here

1 In Angular 17 (and maybe earlier) you have to place fileReplacements block not next to options, but inside it. Also, bear in mind that fileReplacements inside configurations -> production overwrite fileReplacements from outer architect -> build -> options. So if you need replacements from both, you have to merge them by hand and write all fileReplacements inside configurations -> production.

Improve this answer

2 Comments

By placing your replacement outside the configuration does that mean you will always build in production ? What is the command you use for DEV and for PROD in this scenario ?
@MarcRoussel there is only one configuration in "configurations" on the screenshot, so this project can only be built with "production" configuration. If you try to specify --configuration=asdf parameter in build command, you'll get an error.
0

The answer of @jowey is working but with a small extension for Angular 8. I had to prepend the url with ./

"replace": "./src/environments/environment.ts", "with": "./src/environments/environment.development.ts"

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.