Angular: how to add a unique .htaccess file per configuration?

问题

My Angular app contains 2 build configurations: staging, and production.

Currently I have a standard .htaccess file for all builds, by including it in my assets:

"assets": [
  "src/.htaccess",
  "src/assets",
  "src/favicon.png"
],

I want to password protect my staging build directory with a .htpasswd file, so I updated my assets to include it:

"assets": [
  "src/.htaccess",
  "src/.htpasswd"
  "src/assets",
  "src/favicon.png"
],

The htpasswd file can be included in every build, because without a mention in the .htaccess file, it does nothing.

Then, I've created a second .htaccess file, called .htaccess.dev, with the following added lines:

AuthName "Protected"
AuthUserFile /home/admin/domains/dev.***.com/public_html/.htpasswd
AuthGroupFile /dev/null
AuthType Basic
require valid-user

This file with the extra lines should replace the .htaccess file in the staging build, so I added the following configuration to my angular.json file:

"build": {
  ...
  "configurations": {
    "staging": {
      ...
      "fileReplacements": [
        {
          "replace": "src/.htaccess",
          "with": "src/.htaccess.dev"
        },
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ]
    }
  }
}

fileReplacements works fine for my .env, but It does not replace my htaccess file. Why?

回答1:

Ah, it seems that fileReplacements only works for .ts files.

angular/devkit#885:

Currently, the file replacement functionality works only for TS files. More specifically - it works only for files that are part of the webpack compiler host.

This will (apparently) be fixed in Angular 6.1.

See this GitHub thread for more info