angularjs - Angular2 将大型应用程序组织成较小的应用程序

Question

要解决的问题

在工作中，我继承了一个(遗留)非常大的网络应用程序(跨越多个 Scrum 团队和开发团队)的所有权。当前大型应用程序的一个持续痛点是，每当其中一个 Scrum 团队更新其各自的应用程序区域时，该团队就必须部署整个应用程序。为了缓解这种情况，我们开始做的一件事是让团队在大型应用程序之外创建他们的新功能，然后在大型应用程序内部创建一个页面，该页面对新应用程序进行 ajax 调用，并简单地将 HTML 注入(inject)大型应用程序应用程序。这样，团队可以在进行更改时仅部署新的较小应用程序，而无需部署整个大型应用程序(跨越其他团队)。

好消息

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

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

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

提前致谢!

Answer 1

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

1. 考虑将 Angular 组件用作带有“Angular 元素”的自定义元素 - 检查一下:https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-elements-with-angular-elements-a2a0bfcd7f8a

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

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

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

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

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

   1. 我看到您提到了一些 HTML 注入(inject) - 我不确定您打算如何进行，但请考虑使用模板引擎。