使用环境变量构建和服务 Angular 应用程序

Question

我正在通过 openshift 容器部署 Angular 应用程序，其中有不同的环境（Dev、QAT、Prod）可供部署。

我在我的代码库中使用这个 CLIENT_ID 和environment.CLIENT_ID来访问值。在本地主机上它正在工作。

我的源代码中有 2 个环境文件。

1. 环境.ts

    export const environment = {
       producution: false
       CLIENT_ID: xyz-456
    }

2. 环境.prod.ts

    export const environment = {
       producution: false
       CLIENT_ID: "$CLIENT_ID"
    }

project.json 文件

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
}

ocp_configs/qat-a/app_cfg.env 文件

CLIENT_ID=abcd-123

在 ConfigMaps YAML 下的 Openshift 容器中，我可以看到 QAT 值显示为

CLIENT_ID: abcd-123

问题- 本地生产配置与 nxserve 命令运行良好。 但在部署 QAT 后，它仍然选择 Dev 值而不是 QAT 值。

运行 Qat 应用程序 URL 时，我仍然收到

CLIENT_ID as xyz-456

， 但正确的值应该是

CLIENT_ID: abcd-123

首先我认为 FileReplacement 不起作用，我尝试寻找答案但没有多大帮助， 角度 14

Answer 1

大量缺失的信息无法提供帮助。 主要问题是您的申请是如何处理的？

文件替换有效吗？

如果不起作用，可能是您没有使用正确的配置。
请务必在构建应用程序的命令中明确提及配置：
示例：

nx run myApp:build:production

（还有其他方法可以在 nx 中运行命令并指定配置）

由于缺少有关应用程序如何交付的信息，我怀疑您正在做一个简单的“服务”。要知道该命令的默认配置是 development。 关于 Angular 中的环境变量

使用 WebPack

构建 Angular

时，真实环境变量不起作用。所以，我想知道为什么你说它在本地工作。更多信息会有帮助。 但是通过一些魔法，可以在 webpack 中使用它们。

Nx 有一个关于此的页面。

较新版本的 Angular 可以使用 esbuild，但我不知道它是否支持环境变量，如果不支持，如何使用它们。

最后，您还必须意识到这些变量将在构建应用程序时嵌入。所以你不能构建一次并部署在多个环境上。

另外，我浏览了这篇

最近的 reddit 帖子

。也许它可以帮助你。