如何根据环境替换 Angular 8.3+ 中的 index.html？答案

【问题标题】：How to replace index.html in Angular 8.3+ depending on environment?如何根据环境替换 Angular 8.3+ 中的 index.html？
【发布时间】：2020-04-07 00:04:08
【问题描述】：

我正在开发一个使用 jhipster、Spring Boot 和 Angular 设置的应用程序

我需要根据应用是在 dev 还是 prod 上运行来设置不同的公钥。

我已经在我的 angular.json 中坐了很长时间，并在谷歌上搜索了一堆解决方案，尝试了所有基于 angular.json 的解决方案。

这是我在 angular.json 中尝试过的：

“索引”的旧用法
文件替换
新的索引“输入”“输出”选项
对于后者，我循环使用了所有我能想到的写入索引文件路径的方法（包括文件名）。

我的所有三个索引文件都在 webapp 目录中。
angular.json（相关位）：

  "root": "",
  "sourceRoot": "src/main/webapp",
  "projectType": "application",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "index": "src/main/webapp/index.html",
        "configurations": {
          "production": {
            "index": {
              "input": "src/main/webapp/index-prod.html",
              "output": "src/main/webapp/index.html"
            }
          }
      },
        "scripts": [

        ],
        "styles": [
          "./src/main/webapp/teststyle.css"
        ]
      }
    }
  }

该项目没有 environment.ts 文件，但 enableProdMode() 正在被调用（通过 webpack 魔术）并按预期运行。

我能做什么？理想情况下，我们希望不必在环境之间重新构建，但此时我会采取它，只要 index.html 文件会自动更改。

【问题讨论】：

JHipster 不完全支持 angular.json，不确定您的更改是否被考虑在内，尤其是构建不是由 angular-cli 处理的
那我如何在我的技术栈中完成同样的事情呢？
你看过webpack/webpack.common.js吗？它定义了一些常量，例如 DEBUG_INFO_ENABLED，然后在 angular 文件中使用这些常量来修改某些行为，具体取决于您的应用程序是在 dev 还是 prod 中运行。

标签： angular webpack jhipster angular8

【解决方案1】：

index 选项支持如下简写形式：

"index": {
  "input": "src/index.html", // used index file from your project folder
  "output": "index.html", // created index file in your outputPath
},

angular.json 示例：

"architect": {
  "build": {
    "options": {
      "outputPath": "dist/myproject",
      "index": "src/index.html", // default index file (shorthand form)
    },
    "configurations": {
      "production": {
        "index": { // production index replacement (longhand form)
          // use the file at 'src/index.prod.html' in production builds
          "input": "src/index.prod.html",
          // create the index file under 'index.html' in your outputPath
          "output": "index.html"
        }
      }
    }
  }
}

This feature 已添加到 Angular Cli v8.2.0-next.0。

相关 GitHub 问题：https://github.com/angular/angular-cli/issues/14599

【讨论】：

不知道index 文件替换有单独的部分，正在使用fileReplacements，但它根本不起作用

【解决方案2】：

除了@fridoo 的回答。 Net Basal 撰写了一篇精彩的文章，介绍了我们在这种情况下的选择。

netbasal | environment-based-index-html-with-angular-cli

【讨论】：