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

Question

我正在开发一个使用 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 magic）并按预期运行。

我能做什么？理想情况下，我们希望不必在环境之间重建，但在这一点上，只要 index.html 文件自动更改，我就会使用它。

Answer 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"
        }
      }
    }
  }
}

此功能是在Angular Cli v8.2.0-next.0 中添加的。

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