Angular 基于 Component 的思想,可以让其在一个页面上同时运行多个 Angular 应用;可以在一个 DOM 节点下,存在多个 Angular 应用,即类似于下面的形式:
可这一样一来,难免需要做以下的一些额外的工作:
创建子应用项目模板,以统一 Angular 版本
构建时,删除子应用的依赖
修改第三方模块
而在这其中最麻烦的就是第三方模块冲突问题。思来想去,在三月中旬,我在 Mooa 中添加了一个 iframe 模式。
Mooa
Mooa 是一个为 Angular 服务的微前端框架,它是一个基于 single-spa,针对 IE 10 及 IFRAME 优化的微前端解决方案。
Mooa 框架与 Single-SPA 不一样的是,Mooa 采用的是 Master-Slave 架构,即主-从式设计。
对于 Web 页面来说,它可以同时存在两个到多个的 Angular 应用:其中的一个 Angular 应用作为主工程存在,剩下的则是子应用模块。
主工程,负责加载其它应用,及用户权限管理等核心控制功能。
子应用,负责不同模块的具体业务代码。
在这种模式下,则由主工程来控制整个系统的行为,子应用则做出一些对应的响应。
iframe 微服务架构设计
在这里,总的设计思想和之前的《如何解构单体前端应用——前端应用的微服务式拆分》中介绍是一致的:
主要过程如下:
主工程在运行的时候,会去服务器获取最新的应用配置。
主工程在获取到配置后,将一一创建应用,并为应用绑定生命周期。
当主工程监测到路由变化的时候,将寻找是否有对应的路由匹配到应用。
当匹配对对应应用时,则创建或显示相应应用的 iframe,并隐藏其它子应用的 iframe。
其加载形式与之前的 Component 模式并没有太大的区别: