Angular单应用运行多项目 实现独立构建部署无需重编译主应用

你的需求完全匹配微前端的核心设计目标：支持多团队独立开发、独立部署、运行时动态加载子应用，不需要主应用重新构建即可生效。

具体实现选型推荐 #

• 基座-子应用模式（通用无侵入方案）
  主应用作为基座仅负责公共模块（菜单、头部、内容挂载容器）维护、路由匹配规则、子应用生命周期调度，不需要耦合任何子应用的业务代码。子应用独立完成开发、构建、部署后，只需在主应用的远程配置中心（可以是自行维护的配置后台、或者存在服务端的子应用注册列表）新增子应用的路由前缀、资源入口地址即可。主应用运行时拉取配置，匹配到对应路由时自动拉取子应用资源挂载到内容区域，子应用新增路由、组件完全不需要修改主应用代码，也不需要重新构建主应用。
  可以直接复用成熟的微前端调度逻辑，不需要从零开发生命周期管理能力：
  主应用仅需完成3项核心配置：

  1. 预留id为sub-app-container的DOM节点作为子应用挂载容器
  2. 增加运行时拉取子应用配置、注册子应用的逻辑，示例逻辑：

  // 主应用运行时从服务端拉取子应用配置，不硬编码在项目代码中
  const subApps = await fetch('/api/sub-app-config').then(res => res.json())
  // 批量注册子应用
  subApps.forEach(app => {
    registerApplication({
      name: app.name,
      app: () => System.import(app.entry), // 子应用构建产物的静态资源入口地址
      activeWhen: app.activeRule, // 路由匹配规则，如`/app2`开头的路由均加载该子应用
      container: '#sub-app-container'
    })
  })
  start()
  

  3. 子应用按照规范导出bootstrap、mount、unmount三个生命周期函数，构建时配置为umd格式即可，Vue、React、Angular、原生JS开发的子应用均可兼容。

• Web Components 轻量方案
  如果你不想引入额外的微前端依赖，也可以将子应用的所有组件打包为标准Web Components自定义元素，子应用把构建完成的JS资源上传到静态资源服务器，主应用匹配到对应路由时，动态创建script标签加载子应用资源，直接在内容区域渲染对应的自定义元素即可，示例：

  <!-- 主应用内容区域动态加载后渲染子应用组件 -->
  <app2-user-list></app2-user-list>
  <app2-order-detail></app2-order-detail>
  

  该方案完全遵循W3C标准，无框架绑定，子应用更新组件后只需覆盖上传静态资源，主应用访问时自动拉取最新版本，完全不需要重新构建主应用。

对比iframe的优势 #

• 无同域限制，主应用和子应用的通信、状态共享非常便捷，不需要做postMessage的复杂序列化处理
• 不存在iframe的滚动条冲突、层级冲突、路由不同步问题，用户体验和原生单页应用完全一致
• 加载性能更优，不需要重复加载公共依赖资源，也没有iframe的初始化性能开销

落地注意事项 #

• 建议做资源版本管理，子应用更新时生成带hash的资源文件名，避免浏览器缓存旧资源
• 按需开启沙箱隔离能力，避免子应用的全局样式、JS变量污染主应用运行环境
• 子应用路由建议统一前缀，如团队2的子应用所有路由均使用/app2/*开头，主应用路由匹配逻辑更简单，不会和其他子应用路由冲突

内容的提问来源于stack exchange，提问作者Fearlezz