Angular MFE使用共享模块时如何处理NullInjector Error？

问题根源 #

独立运行时，主项目和共享模块处于同一个Angular注入器上下文，所有依赖能被正常解析注入。但微前端（尤其是基于Module Federation的场景）中，Shell和远程模块是相互独立的注入器上下文：

• 远程模块的服务/依赖不会自动共享到Shell的注入器中
• 当Shell里的服务依赖共享模块内容时，Shell的注入器找不到对应的提供者，就会抛出NullInjectorError: R3InjectorError(AppModule)

常见具体诱因：

• 共享模块未在Module Federation配置中声明为可共享项
• Shell与远程模块的共享依赖版本不一致，导致注入器判定为不同依赖
• 共享模块的服务未用providedIn: 'root'全局注册，或模块未正确导出提供者

具体解决步骤 #

1. 配置Module Federation共享规则 #

在Shell和远程模块的module-federation.config.js中，将共享模块及核心依赖声明为共享项：

shared: {
  "@angular/core": { singleton: true, strictVersion: true },
  "@angular/common": { singleton: true, strictVersion: true },
  "your-shared-module": { singleton: true, strictVersion: true, import: "your-shared-module" }
}

• singleton: true：确保整个微前端环境仅存在一个依赖实例，避免多注入器冲突
• strictVersion: true：强制依赖版本一致，防止版本差异导致的依赖不识别

2. 规范共享模块服务的提供方式 #

如果共享模块包含服务，优先用全局注册方式：

@Injectable({
  providedIn: 'root' // 全局单例，微前端环境下可被Shell和远程模块共享
})
export class SharedService {}

若需模块级注册，确保在共享模块的providers中声明并导出相关内容：

@NgModule({
  providers: [SharedService],
  exports: [/* 导出需要对外暴露的组件/指令 */]
})
export class SharedModule {}

3. 统一依赖版本 #

检查Shell和远程模块的package.json，确保共享模块、Angular核心库等依赖的版本完全一致。版本不一致会导致Module Federation无法识别为同一依赖，进而无法共享注入上下文。

4. 手动在Shell中导入共享模块 #

若远程模块的共享模块未被Shell自动识别，可直接在Shell的AppModule中导入：

@NgModule({
  imports: [SharedModule],
  // ...其他配置
})
export class AppModule {}

让Shell的注入器提前识别共享模块的提供者，避免找不到依赖的问题。

5. 控制异步加载时机 #

如果远程模块是异步加载的，确保Shell中依赖共享模块的服务在远程模块加载完成后再初始化。可通过APP_INITIALIZER或路由守卫，保证远程模块加载完成后再启动相关业务逻辑。

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