在同一页(根)上呈现2微前端

Question

当我使用微前端架构时，我正在挣扎于下面的场景：

我有一个用于搜索的第一个微前端(例如，我寻找人)，我有另一个微前端用于显示所选人员的细节(与其他微前端一起重用)。两者都是以角度写成的，并有自己的路由。

我尝试使用一个框架，如单Spa.js，在其中注入第一个应用程序(搜索应用程序)和一个引导模式的细节(app2)，两者之间的通信是通过一个共享状态在redux。但这两种路由都是在冲突中进入的，当两个应用程序启动时，它们都希望路由到默认路由，然后它就崩溃了(某种程度上是无限循环)。

有人已经成功了吗?这个场景可能是通过使用WebComponents来实现的，这样所有的角度应用程序都可以独立运行，并且两个路由都是分开的，并且不与另一个应用程序交互？当然，不使用iFrames ;)

致以敬意，

Answer 1

我认为https://www.npmjs.com/package/@angular-architects/module-federation在您的用例中可能很有用。

Webpack 5提供了非常好的功能，可以联合您的模块，并在一个内编写多个微应用程序，并共享资源。