无法设置 fileReplacements 以用 Angular 11 替换文件夹内容答案

【问题标题】：Cannot set fileReplacements to replace folder content with Angular 11无法设置 fileReplacements 以用 Angular 11 替换文件夹内容
【发布时间】：2021-03-24 13:33:15
【问题描述】：

我在 angular.json 文件中使用 angular cli config fileReplacements 来替换文件夹内容，如下所示：

{
  "projects": {
    "myProject": {
      "architect": {
        "build": {
          "configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "node_modules/moment/locale/",
                  "with": "src/moment-js-locale/"
                }
              ]
            }
          }
        }
      }
    }
  }
}

请注意，在replace 值中，我使用的是文件夹路径而不是文件路径。这是 Angular 10 的工作代码。

我升级到 Angular 11，现在尝试使用以下命令构建 prod 版本时出现错误： ng build --prod

我得到的错误是：

Schema validation failed with the following errors:
  Data path ".fileReplacements[1]" should NOT have additional properties(replace).
  Data path ".fileReplacements[1].replace" should match pattern "\.(([cm]?j|t)sx?|json)$".
  Data path ".fileReplacements[1]" should match exactly one schema in oneOf.

ESLint 向我显示此警告：

String does not match the pattern of "\.(([cm]?j|t)sx?|json)$".

我能用这个做什么？这是 Angular 11 的错误吗？我应该使用其他方法吗？

任何帮助将不胜感激。

【问题讨论】：

标签： angular angular-cli angular11 angular-json

【解决方案1】：

所以事实证明这个功能实际上是一个Bug? 在 Angular 10 之前可以进行文件夹替换这一事实从一开始就不应该起作用。

我在angular-cli repo 中提出了这个问题，这就是我得到的答案：

很抱歉您在更新后遇到此问题。但是，替换目录从来都不是文件替换功能支持的用例。

我想这需要由开发人员处理。就我而言，我只是添加了一个脚本来使用shell 命令执行此操作，并且我正在使用npm run script 将此脚本作为预构建脚本运行。

【讨论】：

这是一个令人失望的结果，显然不是你的错！我一直在使用它来替换基于目标客户端的 web.config 文件，但现在出现异常，因为“web.config”与他们强制执行的文件模式不匹配。感谢您回来提供您的发现。
我同意这种失望。我正在使用它，以便我们可以在服务时指向不同的 API，从而减少运行多个 api 项目的需要，而只需要更改您的前端。

【解决方案2】：

我成功完成了 web.config 和生产专用图像的以下配置（我将生产文件放入 src/deployment/prod 并将它们从“输出”变量复制到 dist 目录）：

"fileReplacements": [
    {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
    }
],
"assets": [
    "src/assets",
    "src/favicon.ico",
    {
        "input": "src/deployment/prod",
        "output": "/",
        "glob": "web.config"
    },
    {
        "input": "src/deployment/prod",
        "output": "assets/img",
        "glob": "*.png"
    }
]

所以在你的情况下你可能可以使用：

{
    "input": "node_modules/moment/locale/", -- source folder in ClientApp/
    "output": "moment-js-locale", -- destination folder in dist/
    "glob": "*.js" -- all js files will be copied
}

【讨论】：

注意：这适用于资产，必须在构建后复制到 dist 文件夹中的文件。但是如果你想在构建过程中移动需要的文件，那是行不通的。