Angular CLI fileReplacements for default/development

Question

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.

score 9 · Accepted Answer · answered Feb 16 '19 at 17:05

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.

score 1 · Answer 2 · edited May 03 '21 at 19:09

1

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:

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 file:

edited May 03 '21 at 19:09

Dharman

30,962
25
85
135

answered May 03 '21 at 19:04

Carlos Cruz

405
3
6

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 ? – Marc Roussel Jan 20 '22 at 17:47

score 0 · Answer 3 · answered Dec 08 '19 at 11:10

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"

answered Dec 08 '19 at 11:10

Gabor

352
5
14

Angular CLI fileReplacements for default/development

3 Answers3