如何在 Angular 工作区配置上用属性 fileReplacements 替换文件？

Question

I have a problem with Angular workspace configuration when I want to replace file, I will provide some information below:

My app info:

• Angular: ~9.0.7
• Angular CLI: 9.1.10

Structure

example
---e2e
---src
------environments
---------not-supported.html
---------index.prod.html
------index.html
------not-supported.html
---angular.json

angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/not-supported.html"
            ],
            "styles": [
              "src/styles.scss"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              }
            },
            "replaceNotSupported": {
              "fileReplacements": [
                {
                  "replace": "src/not-supported.html",
                  "with": "src/environments/not-supported.html"
                }
              ]
            }
          }
        },

Script build on package.json file

{
   "build:prod": "ng build --configuration=production,replaceNotSupported",
}

after I build successfully, Then content on not-supported.html file is not same with content file on environment/not-supported.html .

How can I do that?

Dose anyone same problem with me?

Thanks!

Answer 1

I don't know if you still care about this problem.:) try to use "assets":

    "assets": [
  "src/favicon.ico",
   {
     "input": "src/deployment/staging",
     "output": "/",
    "glob": "*.ico"
   }
   ]

setup assets to every configrations. see enter link description here

Answer 2

Replace files in a specific angular configuration

"production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "src/not-supported.html",
                  "with": "src/environments/not-supported.html"
                }
              ],

Run the following command for build:

ng build --configuration=production

• You have to provide all the fileReplacements in a specific configuration in this case 'production'