fileReplacements in angular.cli serve configuration

Question

I have a requirement to replace files in my Angular application using fileReplacements, but it seems that this is only available in build configurations, and not serve configurations.

Here is an extract of my angular.json:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "SupplierPortal:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "SupplierPortal:build:production"
    },
    "fr": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.fr.ts"
        }
      ],
      "browserTarget": "SupplierPortal:build:fr"
    }
}

But the compiler complains:

Schema validation failed with the following errors:

Data path "" should NOT have additional properties(fileReplacements).

Is it possible to have configurations for various serve builds?

Answer 1

You almost got it. After specifying the fileReplacements in your build configurations, just need to tell to the serve configuration which build config to use.

Then you can execute ng serve -c=fr and the serve will apply the fr build configuration:

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "configurations": {
      "fr": {
        "fileReplacements": [{
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.fr.ts"
        }]
      }
    }
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "SupplierPortal:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "SupplierPortal:build:production"
      },
      "fr": {
        "browserTarget": "SupplierPortal:build:fr"
      }
    }
  }
}