Angular MFE结合NX库使用NgRx时出现No provider for Store错误

错误核心是远程MFE模块的DI容器无法找到Store的提供者，根源在于远程模块未正确导入NgRx必要模块，且可能存在提供者重复配置的问题。以下是具体解决步骤：

1. 修正远程模块的NgRx导入 #

远程模块RemoteEntryModule必须导入NgRx的核心模块及ComponentStore模块，同时确保共享库的NgrxStateModule被正确引入（它已包含StoreModule.forFeature和GlobalFacade的配置）：

@NgModule({
  imports: [
    CommonModule,
    // 导入ComponentStore模块，支持ComponentStore的依赖注入
    ComponentStoreModule,
    // 导入共享的NgRx状态模块，复用宿主的根Store及全局Feature Store
    NgrxStateModule,
    RemoteEntryRoutingModule // 其他必要路由模块
  ],
  providers: [
    // 仅提供ProductCategoryStore，不要重复提供GlobalFacade（共享库已提供）
    ProductCategoryStore
  ]
})
export class RemoteEntryModule { }

2. 移除重复的GlobalFacade提供者 #

不要在远程模块的providers数组中重复声明GlobalFacade，否则会创建新的实例，其依赖的Store无法关联到宿主的根Store实例，导致注入失败。GlobalFacade应完全由共享库的NgrxStateModule提供。

3. 验证ComponentStore的依赖注入 #

确保ProductCategoryStore的构造函数正确注入GlobalFacade，且符合ComponentStore的使用规范：

@Injectable()
export class ProductCategoryStore extends ComponentStore<ProductCategoryState> {
  constructor(private globalFacade: GlobalFacade) {
    super(initialProductCategoryState); // 传入初始状态
  }

  // 业务逻辑方法示例
  readonly loadCategories = this.effect(() => 
    this.globalFacade.getAuthState().pipe(
      switchMap(authState => /* 基于全局状态的业务请求 */)
    )
  );
}

4. 确保模块联邦的共享配置正确 #

在宿主和远程应用的模块联邦webpack配置中，将NgRx核心包及自定义共享库标记为单例共享，避免重复加载导致的实例冲突：

// webpack.config.js 模块联邦配置片段
shared: {
  "@angular/core": { singleton: true, strictVersion: true },
  "@angular/common": { singleton: true, strictVersion: true },
  "@ngrx/store": { singleton: true, strictVersion: true },
  "@ngrx/component-store": { singleton: true, strictVersion: true },
  "@your-org/ngrx-state-lib": { singleton: true, strictVersion: true } // 你的共享库
}

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