ng-mfe基于原生 ES Module 的现代微前端运行时

30 秒了解 ​

是什么 —— 一个以 Angular 为门户、框架无关为目标的微前端运行时:Portal 门户 + N 个独立开发/独立部署的子应用,在浏览器运行时组装为一个整体。

技术形态 —— 子应用本质是普通 Vite 应用,以原生 ES Module 方式动态加载,不依赖 Webpack Runtime,不使用 Module Federation 作为运行时组装方案。

框架立场 —— Angular 21 Zoneless 门户、Signal 驱动;Angular / Vue / React / Web Component / 纯 JavaScript 子应用均可接入。

能力组合 —— 双模式沙箱、EventBus + RPC + SharedState 通信、L1/L2/L3 多级缓存、统一 HTTP 管道、认证单飞刷新、地图集成层、跨应用组件复用与 11 项界面无关企业服务,收敛为 5 个可发布包按需引入。

总体架构 ​

加载链关键事实:子应用入口由 <script type="module"> 注入加载,子应用调用 defineMfeApp(name, lifecycle) 注册生命周期(bootstrap / destroy 必选,activate / deactivate / navigateByUrl 可选),宿主通过 mfe:lifecycle-defined 事件 + 指数退避轮询完成握手。开启 coexist: true 的子应用卸载后进入 HIDDEN 状态停放到隐藏容器,再次激活零引导成本,超出的按 LRU 淘汰并彻底销毁。

支持的子应用形态 ​

表中能力均对应仓库内可运行的示例:examples/ 下 5 个子应用(Angular / Vue / React / Web Component / 纯 JS)在 4201–4205 端口独立启动,由 4200 端口的 Portal 统一编排。

快速开始 ​

git clone https://github.com/echemoo/ng-mfe.git
cd ng-mfe
bun install            # 或 npm install

npm run examples:start # 并行启动 portal + 5 个子应用(4200-4205)

访问 http://localhost:4200,演示账号:

npm run demo              # Node 端(jsdom)一键演示框架全能力,无需浏览器
npm run test              # 全量测试(单元 + 集成,约 1900 用例)
npm run e2e               # Playwright 端到端(109 用例)

不想启动浏览器?npm run demo 在 Node 端以 jsdom 依次演示:服务初始化 → AuthCoordinator 协调 → I18n → 菜单 ACL 过滤 → HTTP 管道 + CRUD Mock → 三个纯 DOM 子应用编排 → coexist 保活 → EventBus/RPC → 受保护 SharedState → 缓存命中率 → 沙箱隔离 → 销毁清理。

为什么选择这套架构 ​

• 子应用自主性优先:每个子应用是标准 Vite 工程,可以独立启动(4201–4205)、独立构建、独立部署,不向特定构建器或运行时契约缴械;
• 运行时组装而非构建期耦合:Portal 在浏览器中以 script module 加载子应用入口,注册表只是数据(名称 + 入口 + 挂载模式),增删子应用不动 Portal 代码;
• 隔离与治理内建:全局作用域污染由双模式沙箱拦截,定时器/事件/DOM 插入自动追踪清理;跨应用数据流收敛到受保护键的 SharedState 与 EventBus,而非互相 import;
• 网络韧性默认开启:去重、超时、重试、缓存、单飞刷新是管道中间件,业务代码不重复造轮子;
• 可验证性:从单元到 E2E 的测试金字塔 + zoneless 守卫 + 体积门禁,架构约束由 CI 执行而非口头约定。

继续阅读 ​

MIT License · GitHub · Roadmap