Question

由于我们在此处进行设置的方式，我的本地开发环境（ng serve）与我的生产构建环境（ng build --base-href =“ / path /” --prod。）不同。 d想使用不同的index.html文件进行投放和构建，而构建仍会生成正确的index.html。

如果更改我的angular.json，则会收到一条消息，指出不允许使用fileReplacements属性。不过，ng serv的文件替换似乎最容易维护。

          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
            }
          }

这给我一个错误，即服务部分中不允许使用fileReplacements属性。 Package.json具有@ angular / core ^ 8.0和angular cli〜8.0.2。

每当我搜索解决方案时，我的结果都会指向fileReplacements文档，但这似乎不起作用。该文件不会被替换。我知道还有很多其他方法可以做到这一点，但是我想尽可能地采用批准的angular.json方法。

Answer 1

我使用--index标志来进行ng构建，通过执行以下操作而不使用其他文件夹来解决该问题：

开发文件

src/index-dev.html

生产文件

src/index.html

angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "aot": true,
        "outputPath": "www",
        "index": "src/index-dev.html",
     }

cmd：

ng build --prod --index=/src/index.html

由于某种原因--index在此解决方案中仅接受index.html，不接受其他文件名。

Answer 2

如果要使用其他索引文件，可以在单个文件中使用，在不同变量中设置变量以分配布尔值或其他值，并使用ngIf作为索引文件中内容的切换对象一个到另一个我没有完成此代码，但应该可以。

Answer 3

最后终于实现了这一点，以为我可以发布此信息，以防其他人遇到相同的问题，因为这提供了替代答案。最终选择在angular.json配置中使用--index标志。

唯一的缺点是我必须指定相同的名称文件，因此index.html意味着需要几个额外的文件夹来分隔文件。

文件结构

index_files 
    > environment_1
        > index.html
    > environment_2
        > index.html

angular.json

"configurations": {
    "environment_1": {
        "index": "index_files/environment_1.index.html"
    },
   "environment_2": {
        "index": "index_files/environment_2.index.html"
    }
}

Answer 4

我开发了NPM package，它将从src文件夹复制索引文件替换为dist文件夹

  "scripts":{ 
"build": "ng build && npm run-script copy-index-file",
"copy-index-file":"node node_modules/index-file-replacer/lib/ --index=index2.html"
 }

在此示例中，index2.html是将被复制到dist文件夹的文件

现在运行此命令npm run-script build，它将构建项目并将索引文件复制到dist文件夹

Answer 5

对我来说，此配置有效（将 prod index.html 放入 src/deployment/prod 并将 dev index.html 保留在 src/ - 当您运行 dist/ 它将被替换在 ng build --prod 文件夹中{1}})：

"fileReplacements": [
    {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
    }
],
"assets": [
    "src/assets",
    "src/favicon.ico",
    "src/web.config",
    {
        "input": "src/deployment/prod",   -- here is prod index.html file
        "output": "/",                    -- this point to dist/
        "glob": "index.html"
    }
]

如何在ng serve和ng build中使用不同的index.html文件？

5 个答案: