從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