No provider for Store! using ngrx with Angular MFE with NX library

Question

I have two applications one is the host and another is remote MFE. In the host I have below code

@NgModule({
  declarations: [AppComponent],
  imports: [
    ..........
    StoreModule.forRoot(
      {},
      {
        metaReducers: !environment.production ? [] : [],
        runtimeChecks: {
          strictActionImmutability: true,
          strictStateImmutability: true,
        },
      }
    ),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
    NgrxStateModule,  <-- library where ngrx code is shared
  ],

  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Created a Angular library where NgRx can be shared as a feature, something like below

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature(
      fromGlobal.GLOBAL_FEATURE_KEY,
      fromGlobal.globalReducer
    ),
    // EffectsModule.forFeature([GlobalEffects]),
  ],
  providers: [GlobalFacade],
})
export class NgrxStateModule {}

The RemoteEntryModule of the remote MFE is something like below

@NgModule({
  declarations: [
.......
  ],
  imports: [
    ......
  ],
  providers: [GlobalFacade, ProductCategoryStore],
})
export class RemoteEntryModule {}

I have actions, facade and others component as shown below

global.facade.ts

@Injectable()
export class GlobalFacade {
/// other codes
}

They are all export in index.ts

export * from './lib/+state/global/global.selectors';
export * from './lib/+state/global/global.reducer';
export * from './lib/+state/global/global.actions';
export * from './lib/+state/global/global.facade';
export * from './lib/+state/product/product.category.store';
export * from './lib/ngrx-state.module';

In the same Ngrx State library I have a component store which take the constructor dependency of facasde something like below

@Injectable()
export class ProductCategoryStore extends ComponentStore<ProductCategoryState> {
  constructor(
    private iGenericHttpClient: IGenericHttpClient<any>,
    private globalFacade: GlobalFacade
  ) {
    super(initialState);
  }
//... Others methods
}

And in one of the component the component store has dependency injection as below

export class ProductCategoryComponent implements OnInit {
  constructor(
    private productCategoryStore: ProductCategoryStore,
  ) {
    this.categories$ = this.productCategoryStore.getCategories$;
  }
}

But keep getting an exceptions as below

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(RemoteEntryModule)[ProductCategoryStore -> GlobalFacade -> Store -> Store -> Store -> Store]: 
  NullInjectorError: No provider for Store!
NullInjectorError: R3InjectorError(RemoteEntryModule)[ProductCategoryStore -> GlobalFacade -> Store -> Store -> Store -> Store]: 
  NullInjectorError: No provider for Store!
    at NullInjector.get (core.mjs:6368:27)
    at R3Injector.get (core.mjs:6795:33)
    at R3Injector.get (core.mjs:6795:33)
    at R3Injector.get (core.mjs:6795:33)
    at R3Injector.get (core.mjs:6795:33)
    at injectInjectorOnly (core.mjs:4779:33)
    at Module.ɵɵinject (core.mjs:4783:12)
    at Object.GlobalFacade_Factory [as factory] (global.facade.ts:12:26)
    at R3Injector.hydrate (core.mjs:6896:35)
    at R3Injector.get (core.mjs:6784:33)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26367:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)

Answer 1

I have to add ngrx to the shared module federation configuration

const coreLibraries = new Set([
  ........
  '@ngrx/store',
  '@ngrx/effects',
  '@ngrx/store-devtools',
]);

module.exports = {
  // Share core libraries, and avoid everything else
  shared: (libraryName, defaultConfig) => {
    if (coreLibraries.has(libraryName)) {
      return defaultConfig;
    }

    // Returning false means the library is not shared.
    return false;
  },
};