title: Angular: how to add a unique .htaccess file per configuration?
body: <p>My Angular app contains 2 build configurations: staging, and production.</p>
  
  <hr>
  
  <p>Currently I have a standard <code>.htaccess</code> file for all builds, by including it in my assets:</p>
  
  <pre><code>"assets": [
    "src/.htaccess",
    "src/assets",
    "src/favicon.png"
  ],
  </code></pre>
  
  <hr>
  
  <p>I want to password protect my staging build directory with a <code>.htpasswd</code> file, so I updated my assets to include it:</p>
  
  <pre><code>"assets": [
    "src/.htaccess",
    "src/.htpasswd"
    "src/assets",
    "src/favicon.png"
  ],
  </code></pre>
  
  <p>The <code>htpasswd</code> file can be included in every build, because without a mention in the <code>.htaccess</code> file, it does nothing.</p>
  
  <hr>
  
  <p>Then, I've created a second <code>.htaccess</code> file, called <code>.htaccess.dev</code>, with the following added lines:</p>
  
  <pre><code>AuthName "Protected"
  AuthUserFile /home/admin/domains/dev.***.com/public_html/.htpasswd
  AuthGroupFile /dev/null
  AuthType Basic
  require valid-user
  </code></pre>
  
  <p>This file with the extra lines should replace the <code>.htaccess</code> file in the staging build, so I added the following configuration to my <code>angular.json</code> file:</p>
  
  <pre><code>"build": {
    ...
    "configurations": {
      "staging": {
        ...
        "fileReplacements": [
          {
            "replace": "src/.htaccess",
            "with": "src/.htaccess.dev"
          },
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
          }
        ]
      }
    }
  }
  </code></pre>
  
  <p><code>fileReplacements</code> works fine for my <code>.env</code>, but <strong>It does not replace my htaccess file</strong>. Why?</p>