Angular模块联邦报错NG0303：无法绑定ngIf指令求助

核心原因与修复步骤 #

1. 确认MFE的模块暴露配置 #

必须在MFE的webpack.config.js（模块联邦配置文件）中暴露完整的HomeModule，而非单独的HomeComponent。直接暴露组件会导致Angular无法识别模块中导入的CommonModule指令：

// MFE的模块联邦配置示例
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'homeMfe',
      filename: 'remoteEntry.js',
      exposes: {
        './HomeModule': './src/app/home/home.module.ts' // 正确：暴露完整模块
        // 错误示例：'./HomeComponent': './src/app/home/home.component.ts'
      },
      // 其他配置项...
    })
  ]
};

2. 修正Shell应用的MFE导入方式 #

在Shell应用中，通过模块联邦的动态导入加载MFE模块，而非直接引用组件。路由配置示例如下：

// Shell应用路由配置
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('homeMfe/HomeModule').then(m => m.HomeModule)
  }
];

3. 再次验证HomeModule的CommonModule导入 #

确保HomeModule的imports数组中明确包含CommonModule，无遗漏：

// HomeModule代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule], // 必须存在，否则ngIf等指令无法被识别
  exports: [HomeComponent] // 若需对外暴露组件，需添加此配置
})
export class HomeModule { }

4. 处理Angular版本差异（13 vs 14） #

由于Shell（14）与MFE（13）存在版本差，需通过模块联邦的shared配置共享核心依赖，避免多版本加载冲突：

// Shell与MFE的模块联邦shared配置需保持一致
shared: {
  '@angular/core': { singleton: true, strictVersion: true },
  '@angular/common': { singleton: true, strictVersion: true },
  '@angular/router': { singleton: true, strictVersion: true }
}

5. 清理缓存并重新构建 #

缓存残留可能导致旧模块定义生效，执行以下操作：

• 删除Shell和MFE的node_modules、dist文件夹
• 重新执行npm install
• 分别重新构建MFE与Shell应用

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