Javascript 微型前端体系结构建议，用于构建系统中嵌入通知服务的门户

我们有几个web应用程序（angular 7+）希望在一个单页应用程序下呈现。我们正在寻找一个微型前端架构/框架来使用。在我们看来，以下是我们的实施方案：

使用单一spa开源框架： 使用Iframes（友好的Iframes）托管应用程序（shell）并根据当前URL加载每个应用程序。 使用web组件。 其他的？ 当前状态是一个整体式FE应用程序，它通过IFRAME将另一个子应用程序作为内部应用程序使用（这种方法对我们来说是不可扩展的，因为托管应用程序将所有产品构建在一起，没有任何东西是真正分开的。）

我们的要求是微前端的一般要求： 独立开发-每个团队都可以处理自己的回购协议并构建自己的产品，而不考虑其他产品

独立部署—每个应用程序都可以在生产中升级，而不会停机，也不会干扰其他应用程序

共享组件-我们在应用程序中使用Angular7，我们已经编写了一个专有的第三方库（共享组件和逻辑），应该在所有产品之间共享，以获得类似的外观和感觉

我们希望能够升级每个应用程序的框架（Angular、RXjs、Typescript等，以及我们的专有组件库），而不必关心其他应用程序

我们尝试使用单一spa框架，但我们有一些问题，我们目前发现自己在思考这是否是适合我们的方法，或者我们应该尝试不同的方法

我们使用单一spa时遇到的问题是：

资产加载有问题。（我们必须将资产文件放在托管应用程序的根文件夹中，当切换到另一个应用程序时，我们会遇到资产冲突）

我们仍然不知道如何处理所有应用程序的全局样式（我们使用sass进行样式设置，它必须符合每个应用程序的本地样式）

升级angular framework（或所有其他框架）对于一个应用程序来说是不可能的，要么全部升级，要么什么都升级（因为我们有一个angular的实例）

我们必须为托管应用程序（shell）的另一面实现不同的捆绑开发

当我们考虑Iframe（使用友好的Iframe）解决方案时，我们将所有子应用程序完全分离。通信仅通过post消息进行。在这种方法中，我们可以将UI代码从中分离出来，并通过IFRAME使API单独工作

使用iFrame有什么陷阱吗

一个更通用的实现是创建一个带有自定义元素的web组件，但我们需要支持IE11和Edge，它们不支持本机封装，因此我们需要在使用它的每个网站上测试我们的应用程序，以确保它们不会破坏我们的风格，我也不知道web组件是否可以管理子路由

理想的解决方案应该允许我们的父应用程序通过路由请求子应用程序，而在资源和资产方面它们之间没有任何耦合，并且在这些方面应该是独立的。我们需要的另一个主要功能是这些应用程序之间应该有一个通知机制。

提前谢谢

“共享组件”爆炸，你不是在做微。也许你可以看看我之前的答案。我们已经用计算机解决了你的大部分问题PuzzleJs@AhmetCanG于文，谢谢。所谓“共享组件”，我的意思是，我们将共享样式作为一个模块。同样对于PuzzJS，请帮助我将样板配置作为git回购的一部分？我们使用Piral来实现这一点（）。请注意，Piral适用于主要基于React的微前端，因此它不会直接适合。尽管如此，通过piral base和整个pilet方法（以及piral CLI），我认为您可以达到良好的状态。总的来说，这个架构听起来很合适！