main.js(compiled js-files) 来自 Angular 工件的文件替换另一个构建工件

Question

我们有多个环境，我们有具有后端配置的环境文件，我们在构建期间使用这些文件。 示例：ng build --c UAT

但我有一个问题，现在我们决定只构建一次并部署多个环境相同的工件。

我知道使用 Angular 服务和 APP_INITIALIZER 令牌可以实现这一点，但由于某些原因我们不能使用它。

所以我决定在构建之后，用各自的 env 配置值修改编译的 js 文件（main.js）。但由于 env 变量及其模式的数量增加，这变得越来越困难。

所以我想到了以下流程，请建议它可以使用或者我不应该使用

1，我将使用“ng build --c UAT”构建 UAT webpack(dist/artifact)。

2，我会为所有其他环境做同样的事情，现在我总共有 3 个 dist 文件夹（webpacks）。

3，我会将 UAT 工件部署到所有环境，但在将其部署到 Preprod 之前，我会将“main.js”文件替换为 Preprod 工件 main.js 文件，因为只有 main.js 文件具有所有环境配置。并保持所有其他 js 文件相同。

4，我将重复与产品部署相同的内容。

请就这种方法提出建议。

Answer 1

您做出了一个很好的选择来决定针对特定环境的构建，因为它们总是会回来困扰您。但是通过您的方法，您只是转移了问题，因为您仍然需要调整构建工件。如果您的配置是高度动态的，我建议您重新考虑不使用服务在运行时动态加载数据的决定，或者至少说明这种方法不适合您的限制条件。

假设您仍想依赖静态文件内容，您可能会对How to use environment variables to configure your Angular application without a rebuild 的文章感兴趣。它建议从嵌入的env.js 脚本加载数据，并将其作为 Angular 服务从那里公开。虽然有人可能会争辩说这也只会进一步转移问题，但它至少可以让您的构建工件保持不变。例如，如果您从 nginx docker 容器运行您的应用程序，您可以在网络服务器启动之前动态替换 env.js 中的值。我正在使用这种方法的简化版本，虽然它仍然感觉有点 hacky，但它确实有效！祝你好运！