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.

Answer 1

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.