如何在“ng build --prod”之后让我的 Angular 应用程序使用编辑过的配置文件

Posted 2023-03-15

【中文标题】如何在“ng build --prod”之后让我的 Angular 应用程序使用编辑过的配置文件

【英文标题】：How to make my angular app use edited config file after 'ng build --prod'

【发布时间】：2020-03-21 12:25:36

【问题描述】：

我正在使用 ng build --prod 部署一个 Angular 应用程序。我只想让使用dist 文件夹的用户可以简单地更改asset 文件夹中的config.json 文件，以便他可以设置他的设置，我的应用程序将使用修改后的config.json 文件。

我运行ng build --prod后是否有可能在build文件夹中有一个config.json文件，用户可以直接修改？

如果没有，有没有更好的方法来使用其他策略来实现？

【问题讨论】：

你能举一个这样的用户设置的例子

就像 - "baseUrl": "http://...", "skills": ["A", "B", "C"]

【参考方案1】：

如果我理解正确，您希望根据环境更改的配置参数很少。有两种方法

按照您的描述创建 config.json 文件，它应该使用 HttpClientModule 获取。

您可以创建一个脚本来保存环境变量。在同一个脚本中，您可以使用自定义 webpack 配置构建 Angular 项目。详细解释可以在https://www.youtube.com/watch?v=BU5G_i1J5CA

免责声明：视频是我制作的。

【讨论】：

不是那样的。我想在构建后多次更改config.json。显然只有一种环境是生产环境

你可以使用第一种方法。

好吧，那么你是说我应该在某些服务中获取我的 json，构建后我可以更改我的 json 文件，那么修改会影响我的应用程序吗？

【参考方案2】：

是的，这很有可能。我建议的最佳解决方案是

将您的config.json 保存在资产文件夹中。因为assets 文件夹总是被复制到 dist 文件夹。因此，每次创建构建时，config.json 都将在 dist 下的资产文件夹中可用。 您可以随意编辑它。

您可以遵循的另一种方法是将您的 config.json 保存在 src 文件夹和 angular-cli.json 或 angular.json 中，具体取决于 cli 的版本，将其包含在 assets 数组中。如下所示

angular-cli.json

  "assets": [
        "assets",
        "favicon.ico",
        "config.json"
      ],

angular.json

"assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess",
      "src/config.json"
  ],

See for more

希望这会有所帮助:)

【讨论】：

我可以更改我的配置文件。但这些变化不会影响我的应用程序。问题在这里

好的，那是你如何使用它的问题。使用上述任何一种方法，您都必须编写一个提供程序，该提供程序在启动 Angular 应用程序之前通过 http 获取此文件并将其保存在会话存储或服务等中。因为我有相同的设置并且它工作得很好。让我看看我是否可以添加一个演示..

很好的答案 +1

【参考方案3】：

我了解到您想加载类似于 environment.ts 文件的配置。 environment.*.ts 文件的优点是，它在编译时嵌入到产品中。因此，您将无法在运行时进行更改。为此，您已经创建了单独的配置 json 文件，该文件可以在应用程序开始使用“APP_INITIALIZER”时立即加载。

我认为这个 stackblitz 示例会有所帮助。

https://stackblitz.com/edit/angular-load-config-on-init