TypeError: Cannot read properties of undefined (reading '0') in main.ts

Question

I want to add a library to my Nx Angular project. I added the module in the imports of AppModule. I also had to add StoreModule.forRoot() and EffectsModule.forRoot(). The error occurs when launching the application. I don't understand what might be causing it. I know the lib works has it is used in another lib. I tried to reproduce implementation without success.

AppModule.ts :

@NgModule({
declarations: [AppComponent],
imports: [
    StoreModule.forRoot(),
    EffectsModule.forRoot(),
    MyModule.forRoot(),
    ...
],

Error:

main.ts:14 TypeError: Cannot read properties of undefined (reading '0')

Main.ts line 14 :

platformBrowserDynamic().bootstrapModule(AppModule);

Full error in console:

main.ts:14 TypeError: Cannot read properties of undefined (reading '0') at ngrx-store.mjs:1341:51 at Array.map () at Object.featureStateProviderFactory [as useFactory] (ngrx-store.mjs:1338:28) at Object.factory (core.mjs:3322:38) at core.mjs:3219:47 at runInInjectorProfilerContext (core.mjs:866:9) at R3Injector.hydrate (core.mjs:3218:21) at R3Injector.get (core.mjs:3082:33) at injectInjectorOnly (core.mjs:1100:40) at ɵɵinject (core.mjs:1106:60)

More detail in (ngrx-store.mjs:1338:28) error occurs in const reducers = featureReducerCollection :

function featureStateProviderFactory() {
    inject(ROOT_STORE_PROVIDER);
    const features = inject(_STORE_FEATURES);
    const featureReducers = inject(FEATURE_REDUCERS);
    const reducerManager = inject(ReducerManager);
    inject(_ACTION_TYPE_UNIQUENESS_CHECK, { optional: true });
    const feats = features.map((feature, index) => {
        const featureReducerCollection = featureReducers.shift();
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const reducers = featureReducerCollection /*TODO(#823)*/[index];
        return {
            ...feature,
            reducers,
            initialState: _initialStateFactory(feature.initialState),
        };
    });
    reducerManager.addFeatures(feats);
}

MyModule.ts:

export class MyModule {
public static forRoot(): ModuleWithProviders<MyModule> {
    return {
        ngModule: MyModule,
        providers: [
            {
                provide: SOME_CONFIG,
                useFactory: getEnvironment,
                deps: [AA_ENVIRONMENT, BB_ENVIRONMENT],
            },
            {
                provide: LOCALE_ID,
                useValue: 'fr',
            },
            SomeRepository,
            SomeService,
            OtherRepository,
            OtherService,
        ],
    };
}

}

Answer 1

You need to supply reducers to the StoreModule and effects to the EffectsModule inside forRoot as below!

Check if any reducers or effects have to be added to forRoot!

@NgModule({
declarations: [AppComponent],
imports: [
    StoreModule.forRoot({}), // reducers go inside this object!
    EffectsModule.forRoot([]), // effects go inside this array!
    MyModule.forRoot(),
    ...
],