Angular多仓库微前端应用出现getNgModuleDef错误求助

错误核心原因 #

Cannot read properties of undefined (reading 'ɵmod') 错误本质是壳应用尝试加载远程模块时，无法找到有效的Angular模块定义。常见触发点包括：模块导出名称不匹配、共享依赖配置缺失、远程模块路径错误。

分步解决方案 #

1. 修正路由导入的模块名称 #

壳应用路由中导入的RemoteEntryModule与MF1实际导出的模块名称不符。MF1暴露的是users.module.ts中的模块，需将路由中的导入目标改为该模块的实际导出类名（通常是UsersModule）：

修改Shell App.routing.module.ts的路由配置：

const routes: Routes = [
  { path: '',  component: HomeComponent},
  { path: 'customers', loadChildren: () => 
    import('./customers/customers.module').then(m => m.CustomersModule) },
  { path: 'users', loadChildren: () => import('users/Module').then(m => 
    m.UsersModule) } // 替换RemoteEntryModule为UsersModule
];

2. 完善MF1的共享依赖配置 #

MF1的Webpack配置中shared部分不完整，导致Angular核心模块无法正确共享，引发模块定义冲突。补充完整共享配置：

修改MF1 Webpack.config.ts的shared字段：

shared: share({
  "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
  "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }
}).reduce((acc, curr) => ({ ...acc, ...curr }), {})

同时确保已正确初始化sharedMappings，比如添加：

sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  ['src/app/shared'] // 替换为你的共享路径（如果有）
);

3. 验证MF1模块的正确导出 #

检查users.module.ts是否正确导出模块类：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { UsersComponent } from './users.component';

@NgModule({
  declarations: [UsersComponent],
  imports: [CommonModule, UsersRoutingModule]
})
export class UsersModule { } // 确保该类存在并正确导出

4. 修正MF1的暴露路径 #

MF1的exposes路径存在冗余的./，可能导致模块解析错误，简化路径：

exposes: {
  "./Module": "./src/app/users/users.module.ts", // 去掉多余的./
},

5. 确认远程模块可访问性 #

确保MF1应用在http://localhost:4201正常启动，且http://localhost:4201/remoteEntry.js可通过浏览器直接访问（无404错误）。

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