How can I bring ngrx/store feature module to work with lazy loaded modules?

Question

In my angular app I have some feature modules:

CoreModule (contains services for api calls and models)
MainModule (contains components of main app)
MainDetailModule (contains function for detail view, lazy loaded)
MainStoreModule (contains ngrx/store definition, actions, reducers etc.)

main.module.ts (MainModule)

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CoreModule,
    MainRoutingModule,
    TranslateModule.forChild(),
    BsDropdownModule.forRoot(),
    MainDetailModule,
    MainStoreModule
  ],
  declarations: [
    // components
  ],
  providers: []
})
export class MainModule { }

main-detail.module.ts (MainDetailModule)

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MainDetailRoutingModule,
    TranslateModule.forChild(),
    MainStoreModule
  ],
  declarations: [
    // components
  ]
})
export class MainDetailModule { }

main-store.module.ts (MainStoreModule)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { metaReducers, rootReducers } from './reducer/root.reducer';

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forRoot(rootReducers, {metaReducers}),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    })
  ],
  declarations: []
})
export class MainStoreModule { }

My MainModule imports CoreModule, MainStoreModule and MainDetailModule. MainDetailModule will be lazy loaded by clicking on detail link.

In whole main app my MainStore is working fine. But if I navigate to MainDetailModule the MainStoreModule will be reinitialized and so it will stay empty. I know that ngrx/store can work with lazy loaded modules and I know how can . My question is how can I bring my MainStoreModule to work with my lazy loaded module? Should I implement similar functions like forRoot() and forChild() in my MainStoreModule?

Borys Kupar Borys Kupar · Accepted Answer · 2018-04-09T08:41:32

I've had the similar unexpected behaviour when loading lazy loaded module with ngrx store (StoreModule.forFeature('feature-name', {feature-reducers})). The store was re-initialised, and all actions dispatched before were dispatched again.

The issue was fixed by upgrading the ngrx from 4.1.1 o 5.2.0

How can I bring ngrx/store feature module to work with lazy loaded modules?

2 Answers