Angular2 将大型应用程序组织成更小的应用程序

Posted 2023-02-19

【中文标题】Angular2 将大型应用程序组织成更小的应用程序

【英文标题】：Angular2 organize a large application into smaller apps

【发布时间】：2016-11-15 11:03:27

【问题描述】：

要解决的问题

在工作中，我继承了一个（旧版）超大型 Web 应用程序（跨越多个 Scrum 团队和开发团队）的所有权。当前大型应用程序的一个持续痛点是，每当其中一个 scrum 团队更新他们各自的应用程序区域时，该团队都必须部署整个应用程序。我们开始做的一件事是缓解这个问题，让团队在大型应用程序之外创建新功能，然后在大型应用程序内创建一个页面，该页面对新应用程序进行 ajax 调用并将 html 简单地注入到大型应用程序中。应用程序。这样，团队在进行更改时只需部署新的小型应用程序，而无需部署整个大型应用程序（跨越其他团队）。

好消息

我们目前正在考虑重新编写/重新设计大型应用程序，从开发的角度来看，我的目标之一是将其组织成更小的应用程序/代码库，以便每个团队都可以部署他们的代码而无需部署跨多个团队的大型应用程序。我计划实现这一目标的一种方法是利用多个服务来获取数据。所以这将引入一层分离。

从客户端的角度来看，我非常倾向于使用 Angular 2 的技术之一，尤其是 Angular 2 提供的关注点分离（组件、模板、指令等） .我知道我可以将 Angular 2 应用程序分解为功能、组件等，但我相信，最终所有这些仍然必须存在于一个应用程序/代码库中，所有这些都被部署在一起。 Angular 2 中是否有一种方法可以将大型门户/套件分解为较小的应用程序，并让应用程序相互交互。例如，也许可以共享一个外壳应用程序（用于布局和导航），但是门户/套件的每个区域都可以分解为更小的应用程序？

任何关于从 Angular 2 角度处理/构建它的最佳方法的想法都非常感谢。此外，如果这是明确的，从 Angular 2 的角度来看是不可能的，那也是有用的信息。

提前致谢！

【问题讨论】：

这里有什么进展吗？听起来很有趣，你的解决方案是什么？

这个有什么解决方案吗？

他在一个谷歌群组上交叉发布了答案：groups.google.com/forum/#!topic/angular/pocKojyCpF8

【参考方案1】：

我会尝试从多个角度提供帮助。

考虑将 Angular 组件用作“Angular Elements”的自定义元素 - 看看这个：https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-elements-with-angular-elements-a2a0bfcd7f8a

如果这种方法不能满足您的需求并且您只能提供一个 Angular 应用程序，请尝试：

如果某些应用程序页面可以在不同的选项卡中打开并独立离开 - 考虑将这个巨大的应用程序拆分为更小的模块化 Angular 应用程序。用户不必注意差异。如果您想对所有选项卡使用相同的 url - 从反向代理提供应用程序。

如果流程中没有外部选项卡，那么您可能无法将 Angular 应用程序拆分为更小的应用程序，但您可以以模块化结构构建应用程序，以便每个团队采用不同的应用程序上下文（单独的功能文件）和一个团队将负责“共享”和“核心”实体。每个团队可以有一个单独的分支，拥有团队独有权限，并且只有 FE Lead 可以批准 PR 进入 master。

我还没有尝试过的另一个选项是将功能代码拆分到不同的存储库中 - 但这样你就必须投资一些预编译脚本，这些脚本可以在之前从每个存储库中提取代码启动应用程序。

如果这里有一些服务器端逻辑 - 导出到不同的微服务。

我看到您提到了一些 HTML 注入 - 我不确定您打算如何做，但请考虑使用模板引擎。