基于Module Federation的Angular微前端动态加载架构及路由冲突求解

关于重复调用RouterModule.forRoot()的问题 #

你当前采用的拆分dummy AppModule的方案是Angular微前端领域的标准实践，完全合理，不属于冗余实现。
也可以根据业务场景选择以下两种替代方案：

• 运行时环境判断动态选择路由导入逻辑
  给mfe1的AppModule增加环境判断逻辑，识别当前是独立运行还是作为微前端被shell加载，对应返回RouterModule.forRoot()或者RouterModule.forChild()，示例代码如下：

  // mfe1 环境标识，可通过全局变量/模块联邦共享参数赋值
  const isRunningAsRemote = window.__MFE_IS_REMOTE__ === true;
  
  @NgModule({
    imports: [
      isRunningAsRemote 
        ? RouterModule.forChild(appRoutes)
        : RouterModule.forRoot(appRoutes),
      // 其他导入
    ]
  })
  export class AppModule {}
  

  该方案不需要拆分模块，但是要注意全局标识的污染问题，稳定性略低于模块拆分方案。
• 复用Ex.1的Web Component封装逻辑
  不需要修改mfe1的现有模块结构，将Ex.2的动态加载逻辑调整为加载自定义元素而非Angular模块：动态拉取远程entry后，直接创建对应自定义元素挂载到路由容器中，完全规避模块级的路由冲突问题。

关于公共配置与样式迁移的问题 #

现有迁移方案可正常运行，但可以通过以下优化降低冗余代码：

• 全局样式单独抽离加载
  不需要将全局样式迁移到首组件中，可在mfe1的webpack配置中新增单独抽离全局样式的规则，同时在LookupService的微前端配置项中新增styleUrl字段，shell加载对应微前端路由时，动态创建link标签插入全局样式，卸载时可按需缓存或移除样式，避免重复加载。如果担心样式冲突，可给mfe1的全局样式统一增加命名空间前缀。
• 公共逻辑抽离共享模块
  将原本AppModule中导入、声明的公共内容统一抽离到CoreModule中，dummy AppModule和业务子模块共同导入该共享模块即可，无需重复编写配置。
• 多构建配置适配不同运行场景
  在mfe1的angular.json中新增两套构建配置：独立运行配置保留原styles配置项，微前端构建配置将全局样式移到单独抽离的资源中，不打包进主bundle，避免加载到shell中出现冲突。

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