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?

Answer 1

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

Answer 2

If you plan to lazy-load the MainDetailModule, you cant import MainStoreModule in it. Doing so will cause it to spawn another instance of the main store. If you just want to subscribe to the main store and dont have any feature level reducers, I believe you can import StoreModule as is i.e.

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

If you have feature level reducers, then you would use

StoreModule.forFeature('feature-name', {feature-reducers})