如何处理角度应用程序的配置变量

Question

我研究并发现了两种不同的实现：一种使用 config.json 文件来加载 api url 等内容。另一个用途是将environment.ts 文件拉入 angular.json 中。这两种方法的权衡是什么？还有我目前没有考虑的其他选择吗？

Answer 1

这两种方法（使用 config.json 文件和利用 environment.ts 文件）在 Angular 应用程序中各有优缺点。以下是每个选项的详细信息，以及您可能考虑的其他选项：

1。使用 config.json 文件

优点：

• 关注点分离：配置与代码完全分离，无需重新部署即可更轻松地进行修改 应用程序。
• 动态配置：您可以在运行时更改配置，而无需重建或重新部署应用程序。这 对于环境可能存在的场景特别有用 部署后更改（例如，更新 API URL）。
• 与环境无关的构建：您可以构建一次应用程序并将其部署到不同的环境（例如，登台、 生产）只需更改 config.json 文件即可。

权衡：

• 初始加载时间：应用程序在初始加载期间获取 config.json 文件时可能会有轻微延迟， 特别是如果它是远程托管的话。
• 安全性： 敏感数据不应存储在 config.json 文件中，因为它会暴露给客户端，从而使其可以访问 任何有权访问该应用程序的人。
• 错误处理：如果 config.json 文件加载失败或丢失，应用程序可能会崩溃，除非进行了正确的错误处理 已实施。

2。使用environment.ts文件

优点：

• 编译时环境切换：Angular 的构建系统可以根据构建环境自动切换配置 （例如，ng build --prod 将使用environment.prod.ts）。这使得 易于使用不同的配置进行开发、测试和 生产。
• 类型安全：由于这些文件是 TypeScript，因此您可以获得类型检查的好处，这可以防止错误并改进 您的应用程序的稳健性。
• 与Angular CLI集成：Angular CLI对environment.ts文件的支持非常强大，可以直接进行 Angular 生态系统内的配置管理。

权衡：

• 需要重建：配置中的任何更改都需要重建应用程序，如果配置发生更改，这可能会很麻烦 经常。
• 环境特定的构建：每个环境都需要单独的构建，这可能会导致构建管道更加复杂， 部署过程。
• 运行时灵活性有限：与 config.json 方法不同，配置被烘焙到构建中，因此运行时更改不会 无需新部署即可实现。

3.其他需要考虑的选择

• 通过构建过程添加环境变量：您可以在构建过程中注入环境变量（使用诸如 dotenv、Webpack 或 Angular CLI 的自定义 webpack 配置） 手柄配置。这允许在构建时进行动态配置 时间，同时保持配置安全。
• 后端 API 配置： 在某些情况下，可以在运行时从后端 API 获取配置。这种方法集中 配置管理，但增加了对后端的依赖。
• LocalStorage/SessionStorage：对于某些应用程序，尤其是那些需要跨会话持久配置的应用程序，存储 localStorage 或 sessionStorage 中的配置可能有用。 然而，这种方法通常是对主要方法的补充。 配置方法。
• 功能标志：为了根据环境或用户控制功能，可以使用功能标志服务（例如，LaunchDarkly、Unleash） 集成，提供了一种无需切换功能即可打开和关闭的方法 重新部署。

结论

• 如果您需要运行时灵活性并希望在不重建的情况下更改配置，请使用 config.json。
• 如果您喜欢类型安全、与 Angular 紧密集成，并且您的环境定义良好且不会更改，请使用environment.ts 经常。
• 考虑组合方法：使用environment.ts进行静态配置，使用config.json进行动态配置。