Angular 6：根据环境切换不同index.html文件的配置问题

哎，这个问题我之前也踩过坑！Angular CLI的fileReplacements配置项仅对TypeScript/JavaScript等源码文件生效，像index.html这种属于构建入口的核心配置文件，不能通过这个方式替换，得直接在对应环境的构建配置里覆盖index参数才行。

具体修改步骤： #

1. 移除fileReplacements中关于index.html的无效配置
   先把你原来production配置里fileReplacements数组里的index.html条目删掉，那部分根本不会生效。

2. 在对应环境的配置顶层添加index字段
   在configurations.production的顶层（和optimization、outputHashing同级），直接指定index的路径为生产环境的文件路径。如果test环境也需要替换index，同理操作即可。

修改后的angular.json关键部分示例： #

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "index": "src/index.prod.html", // 新增这一行，指定生产环境的index文件
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
      // 移除了原来无效的index.html替换条目
    ]
  },
  "test": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    // 如果test环境也需要自定义index，同样添加这一行
    // "index": "src/index.test.html",
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  }
}

验证效果： #

运行生产环境构建命令：

ng build --configuration=production

此时构建出来的产物里就会使用index.prod.html作为入口文件了。如果需要在开发服务器中使用生产环境的index，确保serve.configurations.production指向的browserTarget包含正确的index配置即可。

内容的提问来源于stack exchange，提问作者Kay