新轮子 Mooa：使用 mooa 微服务化 Angular 应用

Angular 基于 Component 的思想，可以让其在一个页面上同时运行多个 Angular 应用；可以在一个 DOM 节点下，存在多个 Angular 应用，即类似于下面的形式：

  
  
  

   
<app-home _nghost-c3="" ng-version="5.2.8">
   
 <app-help _nghost-c0="" ng-version="5.2.2" style="display:block;"><div _ngcontent-c0=""></div></app-help>
   
 <app-app1 _nghost-c0="" ng-version="5.2.3" style="display:none;"><nav _ngcontent-c0="" class="navbar"></div></app-app1>
   
 <app-app2 _nghost-c0="" ng-version="5.2.2" style="display:none;"><nav _ngcontent-c0="" class="navbar"></div></app-app2>
   
</app-home>
  

可这一样一来，难免需要做以下的一些额外的工作：

• 创建子应用项目模板，以统一 Angular 版本

• 构建时，删除子应用的依赖

• 修改第三方模块

而在这其中最麻烦的就是第三方模块冲突问题。思来想去，在三月中旬，我在 Mooa 中添加了一个 iframe 模式。

Mooa

Mooa 是一个为 Angular 服务的微前端框架，它是一个基于 single-spa，针对 IE 10 及 IFRAME 优化的微前端解决方案。

Mooa 框架与 Single-SPA 不一样的是，Mooa 采用的是 Master-Slave 架构，即主-从式设计。

对于 Web 页面来说，它可以同时存在两个到多个的 Angular 应用：其中的一个 Angular 应用作为主工程存在，剩下的则是子应用模块。

• 主工程，负责加载其它应用，及用户权限管理等核心控制功能。

• 子应用，负责不同模块的具体业务代码。

在这种模式下，则由主工程来控制整个系统的行为，子应用则做出一些对应的响应。

iframe 微服务架构设计

在这里，总的设计思想和之前的《如何解构单体前端应用——前端应用的微服务式拆分》中介绍是一致的：

Mooa 架构

主要过程如下：

• 主工程在运行的时候，会去服务器获取最新的应用配置。

• 主工程在获取到配置后，将一一创建应用，并为应用绑定生命周期。

• 当主工程监测到路由变化的时候，将寻找是否有对应的路由匹配到应用。

• 当匹配对对应应用时，则创建或显示相应应用的 iframe，并隐藏其它子应用的 iframe。

其加载形式与之前的 Component 模式并没有太大的区别：