Angular 6 - 根据环境提供不同的索引文件

Question

我有一个本地环境和一个生产环境。在 index.html 中，我根据环境是本地环境还是生产环境来添加或删除脚本文件。

我想要一个简单的方法来处理这个问题。在angular.json 中有一个file_replacement 配置选项。这适用于将environment.ts 切换为environment.prod.ts，但似乎不适用于将index.html 文件替换为index.prod.html。

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "demo": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "polyfills": "src/polyfills.ts",
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                },
                                {
                                    "replace": "src/index.html",
                                    "with": "src/index.prod.html"
                                }
                            ]
                        },
                        "test": {
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.test.ts"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "demo:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "demo:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "demo:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "karmaConfig": "./karma.conf.js",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "scripts": [
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/auth0-js/build/auth0.min.js",
                            "node_modules/moment/min/moment.min.js",
                            "node_modules/ua-parser-js/dist/ua-parser.min.js",
                            "node_modules/d3/dist/d3.min.js",
                            "node_modules/wordcloud/src/wordcloud2.js",
                            "node_modules/chart.js/dist/Chart.bundle.min.js",
                            "node_modules/progressbar.js/dist/progressbar.min.js"
                        ],
                        "styles": [
                            "src/styles/style.scss",
                            "src/theme.scss",
                            "node_modules/font-awesome/css/font-awesome.min.css"
                        ],
                        "assets": [
                            "src/assets",
                            "src/favicon.ico",
                            {
                                "glob": "**/*",
                                "input": "../node_modules/font-awesome/fonts",
                                "output": "/assets/"
                            }
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "demo-e2e": {
            "root": "",
            "sourceRoot": "",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "./protractor.conf.js",
                        "devServerTarget": "demo:serve"
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "e2e/tsconfig.e2e.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "demo",
    "schematics": {
        "@schematics/angular:component": {
            "prefix": "app",
            "styleext": "scss"
        },
        "@schematics/angular:directive": {
            "prefix": "app"
        }
    }
}

Answer 1

从版本@angular/cli@6.1.0-beta.2开始支持。

---

更新（2019 年 11 月）：

The fileReplacements solution does not work with Angular CLI 8.0.0 anymore

将angular.json 改为设置您的生产index.html：

"architect":{
  "build": {
    "options": {
     "index": "src/index.html", //non-prod
    },
    "configurations": {
      "production":{
      "index": { //prod index replacement
        "input": "src/index.prod.html",
        "output": "index.html
      }
    }
  }
}

Answer 2

正如in this github issue 解释的那样，更改angular.json 以设置您的生产index.html：

"architect":{
  "build": {
    "options": {
     "index": "src/index.html", //non-prod
    },
    "configurations": {
      "production":{
      "index": { //prod index replacement
        "input": "src/index.prod.html",
        "output": "index.html
      }
    }
  }
}

Answer 3

我正在使用 Angular 8，但我不知道为什么它对我不起作用。 但我可以为任何构建配置指定index.html 的位置（看起来也像serve）https://stackoverflow.com/a/57274333/3473303

Answer 4

在 Angular 8 中，“fileReplacements”不能用于替换 index.html。这是我的解决方案。

当前工作解决方案

...
"production": {
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
...

完整构建配置

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/bandbutter-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "./animate.min.css",
              "src/styles.css"
            ],
            "scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },