Angular16无壳应用下Module Federation懒加载失效问题求助

你当前的配置存在几个关键问题，导致懒加载失效，以下是具体修正步骤：

1. 修正ModuleFederationPlugin配置 #

你的配置中冗余添加了remotes字段，且name与remotes内的名称大小写不一致，这会导致远程模块解析失败。同时exposes内的模块路径建议加上./前缀，符合ES模块导入规范：

new ModuleFederationPlugin({ 
   name: 'myapp',
   filename: 'remoteEntry.js',
   exposes: {
      './route1': './src/routes/route1.module.ts',
      './route2': './src/routes/route2.module.ts'
   },
   // 移除remotes配置：当前应用作为远程模块提供者，无需将自身注册为远程依赖
})

2. 修正路由配置 #

路由中exposedModule的路径必须与exposes内的键完全匹配，同时确认模块导出名称正确：

export const appRoutes: Route[] = [
  {
     path: 'route1',
     loadChildren: () => 
       loadRemoteModule({
           type: 'module',
           remoteEntry: "http://localhost:8080/remoteEntry.js", 
           exposedModule: "./route1"
        }).then(m => m.Route1Module)
  },
  {
     path: 'route2',
     loadChildren: () => 
       loadRemoteModule({
           type: 'module',
           remoteEntry: "http://localhost:8080/remoteEntry.js", 
           exposedModule: "./route2"
        }).then(m => m.Route2Module)
  }
]

3. 确认模块导出正确性 #

确保每个路由模块在文件中是命名导出，比如route1.module.ts：

@NgModule({
  declarations: [Route1Component],
  imports: [RouterModule.forChild([{ path: '', component: Route1Component }])]
})
export class Route1Module {} // 必须保持此命名与路由中m.Route1Module一致

4. 额外检查项 #

• 确认@angular-architects/module-federation版本与Angular 16匹配，执行npm install @angular-architects/module-federation@16更新依赖
• 重新构建应用，验证remoteEntry.js是否生成在输出根目录
• 访问路由时查看网络请求，确认remoteEntry.js及对应模块chunk是否成功加载

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