管理构建角度应用程序的不同环境的有效方法

Question

我有一个角度应用程序，我需要为不同的客户端构建和扩展，对于每个新客户端，我需要创建一个

environment.<client-name>.<prod-dev>.ts

文件，并且必须添加一些参数，例如

1. backend url
2. some api keys
3. some configurations flags etc... 

我还需要在

angular.json

中管理它，这很快就会变得很麻烦，并且还会在 CICD 中产生问题。

有什么办法吗？我可以改进它吗？

例如，现在对于 3 个客户端，我将有 6 个文件要创建，即开发和生产配置，并且还提供构建目标/配置到

angular.json

Answer 1

问题：从 cli 传递环境变量（配置）

团队决定不在 Angular cli 中添加此功能 以及将

angular.json

定义为 .ts 文件的可能性（您可以在构建期间使用环境变量）也没有给出。

可能的选项/解决方法：

使用@ngx-env/builder

以 NG_APP_ 前缀传递环境变量，类似于在 React 中的做法。对我来说，这看起来是最简单的解决方案，但我个人还没有使用过这个。 需要使用此库中的自定义构建器

"builder": "@ngx-env/builder:browser"

用于编写环境文件的自定义脚本

使用 fs 通过

set-env.js

脚本动态执行文件替换，您可以在该脚本中读取特定的客户端配置，并将值写入

environment.ts

文件中。 版本略有不同，也使用 dotenv

自定义 webpack 构建器

使用

@angular-builders/custom-webpack

和 webpack DefinePlugin 和 spawn ng 作为子进程。这样您就可以传递一个环境变量来确定要使用的客户端配置

使用 Angular-server-side-configuration 传递环境变量

https://github.com/kyubising/angular-server-side-configuration

替换部署工具中客户端的环境文件

加载您在部署过程中以任何方式替换的特定文件，并通过应用程序模块中的 APP_INITIALIZER 加载它们：

{
  provide: APP_INITIALIZER,
  useFactory: async () => {
    try {
      // Dynamically import the client-specific environment
      const clientEnvironment = await import(
        `../config/${clientConfig.ts}`
      ).then((mod) => mod.environment);
      return { ...clientEnvironment };
    } catch (error) {
      console.log(error);
      // If the client-specific environment file doesn't exist, use the default environment
      return {};
    }
  },

使用窗口作为解决方法

为每个客户端都有一个 env.js 文件 - 类似于上面的解决方案，您的部署过程将使用特定的客户端配置替换

env.js

文件。

有一个 angular.ts 文件并通过脚本将其转换为 angular.json

在

angular.ts

文件中，您可以根据您传递的环境变量导入所需的客户端配置，例如

CLIENT_ENV=<client-name><env>

。 您需要在构建之前将这个

.ts

文件转换为

angular.json

。

总结一下

希望这能给您一些关于如何使用 Angular cli 解决这个问题的灵感。

既然您写道您在这些客户端环境文件中也有 api 密钥，请注意所有这些值都可以被访问您的应用程序的任何人读取，并且这些密钥不应包含敏感信息。