Angular模块联邦加载MFE1时出现NgModule类型断言错误

几个实用的修复方向 #

1. 确认MFE1的模块导出是否正确 #

• 检查MFE1的模块联邦配置文件（module-federation.config.js），确保exports里的./Module指向真实的NgModule文件，别写错路径：

  // MFE1的配置示例
  exports: {
    './Module': './src/app/flights/flights.module.ts'
  }
  

• 打开MFE1的目标模块文件，确认导出的是NgModule类，要么加默认导出，要么记好命名导出的类名：

  @NgModule({...})
  export class FlightsModule { }
  export default FlightsModule; // 加默认导出，或后续调用时使用命名的FlightsModule
  

2. 调整Shell中loadRemoteModule的调用写法 #

• 如果MFE1用的是命名导出而非默认导出，Shell的路由配置里要明确指定导出的类名，别直接用m.default：

  {
    path: 'flights',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:3000/remoteEntry.js',
        exposedModule: './Module'
      }).then(m => m.FlightsModule) // 这里填写MFE1中导出的NgModule类名
  }
  

3. 对齐依赖版本 #

• Shell和MFE1的@angular/core、@angular-architects/module-federation版本必须完全一致，版本不匹配会直接导致类型不兼容。
• 分别在两个项目中执行命令检查版本，不一致就调整：

  npm list @angular/core @angular-architects/module-federation
  

4. 清理缓存并重启项目 #

• 缓存可能导致异常，清理两个项目的缓存后重启：

  ng cache clean
  rm -rf node_modules/.angular/cache
  

• 重新启动Shell和MFE1的开发服务器。

5. 检查remoteEntry预加载逻辑 #

• 确认main.ts中预加载remoteEntry的顺序正确，必须等远程入口加载完成后再启动Angular应用：

  import { loadRemoteEntry } from '@angular-architects/module-federation';
  
  loadRemoteEntry({
    remoteEntry: 'http://localhost:3000/remoteEntry.js',
    remoteName: 'mfe1'
  })
  .catch(err => console.error('加载远程入口出错', err))
  .then(() => import('./bootstrap').catch(err => console.error(err)));
  

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