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

标签 angular webpack jhipster angular8

我正在开发一个使用 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 文件自动更改,我就会使用它。

    最佳答案

    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

    关于angular - 如何根据环境替换 Angular 8.3+ 中的 index.html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59324204/

    相关文章:

    javascript - webpack 预加载器如何工作?

    java - JHipster多个数据源导致JdbcSQLSyntaxErrorException : Sequence "SEQUENCEGENERATOR" not found

    json - 在 application.yml 的 json 响应中包含/排除属性

    reactjs - 如何优化 webpack/es6 开销?

    css - 如何更改 Material 单选按钮的文本颜色

    angular - 将 Cdk Overlay 放置在 angular/elements web 组件内

    javascript - 如何在运行时为组件选择 Angular 2 服务

    javascript - 在 webpack 监视模式下,/dist 中的 index.html 在保存时被删除,并且不会再次重新构建(如果没有更改文件)

    JHipster - 如何直接使用 Angular 7 编译 SCSS 文件

    angular - @ngtools\webpack AOT 不工作或卡住在 95% emitting