从 Angular 的生产环境中排除组件代码

Question

我想从 Angular 5+ 的生产版本中排除某些组件。到目前为止，我已经阅读并了解环境变量的概念，但据我了解，这些在运行时可用。我正在寻找的是实际上将某些模块排除在导入之外，以便它们的代码不会进入生产构建（文件）。

我也不想拥有 <div *ngIf="isProduction">...</div>躺着，我更想做的是这样的：

Component({ ... templateUrl: environment.production ? 'app.prod.html' : 'app.html' })

但是，由于 Angular 编译器的工作方式，这也是不可能的。

我想这个问题的答案是调整angular-cli，但鉴于没有好的文档（我可以找到），我想知道是否有人可能有更好的主意？

Answer 1

对于那些正在寻找*不那么可扩展*解决方案的人。

解决方案适用于 Angular 5 / Angular 6+

您可以通过在 angular.json 文件中添加每个文件对来根据您正在构建/服务的环境切换特定文件。

例如，如果您希望仅在使用生产环境/配置时在您的应用组件中使用 app.prod.html 而不是 app.html。

在 angular.json 中，在您希望替换的配置下的 fileReplacements 数组中添加替换：

{
  ...
  "projects": {
    ...
    "configurations": {
      "production": {
        ...
        "fileReplacements": [
          ...
          *** ADD YOUR REPLACEMENT FILES HERE ***
          ...
        ]
      }
    }
  }
}

使用上面的例子：

{
  ...
  "projects": {
    ...
    "configurations": {
      "production": {
        ...
        "fileReplacements": [
          ...
          {
            "replace": "src/app/app.html",
            "with": "src/app/app.prod.html"
          }
          ...
        ]
      }
    }
  }
}

这不是一个很好的解决方案，因为您似乎将为要替换的每个文件执行此操作，但它应该可以工作。

---

使用

构建或提供特定配置

ng serve --configuration=production
ng build --configuration=production