【问题标题】：Angular and Micro-FrontendsAngular 和微前端
【发布时间】：2018-05-27 08:17:19
【问题描述】：

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

想法：

页面由几个可以自主运行的组件组成
每个组件都由一个开发团队管理
每个团队都可以更改、更新和部署他们的组件，而不会破坏其他团队的组件
每个团队都选择自己的工具栈

原因

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

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

这适用于 Angular 吗？

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

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

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

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

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

除了“iframes”之外，还有什么解决方案可以让多个 Angular (5) 应用在同一个页面上运行？

【问题讨论】：

this 对您来说可能是一本有趣的书。这是关于 Azure 门户的构建方式，与您所描述的方式类似，尽管它们确实使用 iframe 但不呈现 UI：They can only run script in their IFRAME - which does not project UI. 和 IFRAMEs are not used to render the UI - that’s all done in the core frame. The IFRAME is only used to automate the JavaScript APIs that communicate over window.postMessage().
非常好的问题。我们面临同样的挑战，但不幸的是，在 Angular 社区/团队中似乎没有太多关注这个话题。一线希望似乎是 Angular 元素。但自宣布以来，没有太多关于它的信息。请参阅 github.com/angular/angular/issues/20891 - 自 30 天以来未回答。使用 vue 或 react 之类的框架，似乎可以为微服务创建复合 ui。我想知道为什么这个用例还没有被 Angular 覆盖。
查看Angular WebComponents
@Daniel FYI Angular WebComponents 不能解决操作员提出的问题。目前，您使用 Angular 开发的所有 Web 组件都必须全部“挂钩”到 Angular 加载时作为引导程序的相同版本。因此，您将无法让不同的团队开发不同版本的 Angular，并将所有组件加载到一个 Angular 应用程序中。
我想知道你是如何解决这个问题的？您是否继续使用此处提到的任何解决方案？如果你能分享你的解决方案，我会很高兴。我面临着完全相同的问题。

标签： javascript html angular microservices

【解决方案1】：

看看 Angular 元素（自定义元素）。 https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

新的 Ionic 版本 (4) 完全基于它，能够在每个版本的 Angular 和每个 JS 框架上使用。

为此，他们创建了https://stenciljs.com/，它将帮助您创建自定义元素。

但如果所有团队都在使用 Angular，那么每个团队都可以使用 ngm 创建一个库。

【讨论】：

不幸的是，Angular 元素和 Angular 文档目前没有解决如何在一页中运行多个具有不同版本的 Angular 应用程序的问题。

【解决方案2】：

似乎已经有一段时间可以满足您的需求了。看看Single-SPA项目HERE。

它是您的微型 SPA 项目的包装 SPA 项目。

【讨论】：

【解决方案3】：

除了 Iframe，目前还有一个可用的选项是 SPA 框架，您可以从这里获取示例代码

https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples https://github.com/joeldenning/simple-single-spa-webpack-example

【讨论】：

【解决方案4】：

我们问自己同样的问题。不幸的是，似乎问题的答案

除了“iframes”之外，还有什么解决方案可以让多个 Angular (5) 应用程序在同一页面上运行（编辑：每个 Angular 应用程序可以使用不同的 Angular 版本）？

目前是

不，很遗憾不是，只要你想使用 Angular 的变更检测（使用 zone.js）。

由于 zone.js Angular 污染了全局范围。更糟糕的是 zone.js 修补了大量浏览器 API (https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md) 以检测区域何时完成。

如果框架不涉及全局范围，则只能在一个页面中使用不同版本的框架而不会产生副作用（这对于 React 和 Vue 来说似乎是正确的）。然后，您可以通过 Webpack 将不同的框架版本与每个应用程序捆绑在一起（具有分离的范围和每个应用程序捆绑包大小增加的缺点）。

所以，如果你想用 Angular 构建一个网页，其中不同的应用程序/模块应该集成在一个页面上，目前唯一可行的解决方案是创建一个部署单体（例如，将来自不同团队的不同模块捆绑在一个 Angular 应用程序中）由 bhantol 在他的回答中解释的 CI/CD 系统）。

Angular 团队似乎也意识到了这个问题，他们可能会通过以下主要版本来解决这个问题。请参阅 robwormwald 关于 Angular Elements 路线图的以下 Github 问题的回答：https://github.com/angular/angular/issues/20891

希望 Angular 团队在 3 月底发布下一个主要版本 Angular 6 时能够提供有关该主题的更多信息。

【讨论】：

关于这个给定的 Angular 6 的任何更新自 5 月以来已经发布，7 于 10 月 18 日发布？
我们选择 React 来实现微前端方法。因此，我不再积极关注 Angular 的开发。同时，Angular 文档包含有关 Angular 元素的部分：angular.io/guide/elements。它指出：“我们正在开发可被构建在其他框架上的 Web 应用程序使用的自定义元素。Angular 框架的最小、自包含版本将作为服务注入，以支持组件的更改检测和数据绑定功能。”。如果实现了这一点，Angular 也应该能够支持微前端。

【解决方案5】：

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

页面由几个可以自主运行的组件组成

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

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

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

每个组件都由一个开发团队管理

开发团队可以像开源中的其他 Angular 项目一样分发组件。他们可以将他们的工件发布到某个 npm 存储库。要开发可归因组件，我建议您参考Angular Material2，这可能会让人不知所措，或者您可以使用每个组件团队使用的ngx-library-builder（基于Angular Team Member filipesilva/angular-quickstart-lib ）之类的东西。

CAVEAT：到目前为止，Angular 团队还没有一个快速的组件库共享项目设置，这在 Angular CLI 中很明显。但是许多开发人员已经创建了某种库构建器来填补 Angular CLI 中的空白。

每个团队都可以更改、更新和部署他们的组件，而不会破坏其他团队的组件

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

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

每个团队选择自己的工具栈

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

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

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

这适用于 Angular 吗？

如果您认识到这些限制并提供治理，我建议您这样做。

【讨论】：

【解决方案6】：

可以。

但是在编写 Web 组件时，您并不想真正陷入框架中，因为 Web 组件的全部意义在于可以在任何地方重用。

我同意您的看法，在实现方面，专注于功能而不是大型应用程序肯定会更好地提高软件质量以及开发人员的生产力。

最后，您现在要寻找的不是 Angular，而是 StencilJS。 Stencil 是 Web 组件的编译器，它还在组件内部生成虚拟 DOM 以提高其 UI 性能。看看吧;-)

【讨论】：

【解决方案7】：

除了 IFrame 和通过 postMessage 进行通信之外，集成不同 Angular 应用程序的唯一方法是“深度链接”它们并使用 URL 参数交换信息。然后，所有 Angular 应用程序都位于它们自己的浏览器选项卡上。但是对于通用服务和组件，您可能希望实现所有 Angular 应用程序都使用的“共享内核”，因此您会卡在某个 Angular 版本范围内。当你想要这个共享内核时，推荐使用 NGModule 方法。您可以在一个应用程序中混合使用 Angular 2 和 Angular 5 版本，因为它们是向后兼容的。在 Angular 团队引入重大更改之前，团队并不迫切需要坚持相同的版本。尽管如此，当您不更新时，您的技术债务会增加。 Angular/Javascript 领域的技术更新频率肯定更高。

【讨论】：