javascript - Angular 和微前端

Question

我正在研究如何将一个巨大的单页单体拆分成一个微前端架构。

想法:

• 该页面由几个将自主运行的组件组成
• 每个组件都由一个开发团队管理
• 每个团队都可以在不破坏其他团队组件的情况下更改、更新和部署他们的组件
• 每个团队选择自己的工具包

原因

要高效地开发大型应用程序，您需要有很多人参与其中。然而，每个应用程序/团队的开发人员数量并没有很好地扩展。独立团队并行开发多个独立应用程序，但可以任意扩展

考虑到这一点，团队必须选择自己的工具栈，尤其是对第三方库(如 angular、react、jquery)执行独立的版本升级。如果不是这种情况，则框架更新需要与每个组件兼容，然后才能将其部署到生产环境中。

这适用于 Angular 吗？

虽然独立的版本升级是必要的，但将团队限制在几个受支持的框架(Angular、React、Vue、Polymer...)上是合理的，现在我尝试构建一个纯粹由 Angular 组成的演示-应用。

然而，尽管 Angular 5 被认为是支持大型多模块应用程序的平台框架，但在同一浏览器窗口中运行多个独立的 Angular 应用程序似乎几乎是不可能的。

我设法通过使用 HTML 导入在单个 Web 应用程序上引导多个 Angular 应用程序(不同版本，每个都托管在自己的服务器上)。但是，有几个global 依赖项需要在应用程序之间共享

• zone.js 只能启动一次
• 路由需要更改 url
• 诸如 cookie、sessionstorage 等浏览器内容...

网上有几篇关于如何引导多个 Angular 模块的文章，但它们都引用了同一个核心应用程序中的多个模块，这反过来意味着它们都在同一个框架版本上运行，并且更新意味着您必须重建和部署整个整体。

除了“iframe”之外，还有其他解决方案可以让多个 Angular (5) 应用程序在同一页面上运行吗？

Answer 1

我不会直接建议反对这个想法，主要是因为单独的堆栈要求，我会列出权衡并提供一些限制，这将使这成为可能。

the page consists of several components which would be running autonomously

我们都知道这是在 Angular 组件中开箱即用的，具有明确的输入和输出界限。

小警告:当/如果您为 @Input 传递对象并使用 @Output() 发出事件对象时，交互组件必须预先就定义的接口(interface)达成一致。

解决方法:创建另一个仅定义这些工件的 TypeScript 项目。所有其他“组件项目”将取决于此的特定版本。

each component is managed by one dev-team

开发团队可以像开源中的其他 Angular 项目一样分发组件。他们可以将他们的工件发布到某个 npm 存储库。开发属性组件我推荐你引用Angular Material2这可能会让人不知所措，或者您可以使用类似 ngx-library-builder 的东西(基于 Angular Team Member filipesilva/angular-quickstart-lib )每个组件团队使用。

警告:到目前为止，angular 团队还没有像 Angular CLI 中那样的快速组件库共享项目设置。但是许多开发人员已经创建了某种库构建器来填补 Angular CLI 中的空白。

each team can change, update and deploy their components without breaking components of other teams

让您的主项目拉取所有组件并在某些 CI 服务器上执行定期/更改触发的构建/部署。这实质上是使用所有最新的组件版本生成 AOT 生产版本。作为额外的好处，您可以构建一些抽象的端到端测试来执行一些自动化集成测试，确保一个组件的副作用不会破坏其他组件。

警告:很难管理每个团队如何开发组件，即他们如何优化内存、CPU 和其他资源的使用和配置。例如如果一个团队开始创建订阅并且不删除它们怎么办。使用一些静态代码分析可能会有用，但此时您将无法获得此源代码 - 除非他们也发布了他们的源代码。

each team chooses its own toolstack

除非您指的是开发人员工具(如 IDE 和某些“devDependencies”)中的“toolstack”，否则这是一个彻底的交易破坏者。尽管每个团队的“devDependencies”的某些部分必须具有完全相同的 Angular 开发工具包版本，例如编译器等。

至少每个团队必须使用相同的 Angular、RxJS 等。

最重要的是要注意，每个团队都不会引导任何组件——只有主项目会有一个引导模块，它将引导根组件。这将有助于回答您的 zone.js 问题

Does this work with Angular?

如果您认识到局限性并提供治理，我建议您去做。