title: NgRx shared store resets when loading lazy loaded module
body: <p>I have various store modules that are imported to the main store module and each store module registers itself with <code>StoreModule.forFeature</code>. I also have various feature modules. I am trying to lazy load one of those feature modules but once it's loaded, the store gets reset. I don't want to lazy load any store modules. The whole store is shared. NgRx devTools lose all the previous actions and <code>@ngrx/store/init</code> and <code>@ngrx/effects/init</code> is re-run once the lazy loaded module is created. Any ideas how to keep the whole store intact once a lazy module is loaded?</p>
  
  <p><strong>--- update ---</strong> </p>
  
  <p><strong>file structure</strong></p>
  
  <pre><code>store
   - store.module.ts
   - auth-store
     - actions.ts
     - effects.ts
     - reducer.ts
     - selectors.ts
     - state.ts
     - auth-store.module.ts
   - customers-store
     - ...
     - customers-store.module.ts
  </code></pre>
  
  <p><strong>auth-store.module.ts</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      StoreModule.forFeature('auth', authReducer),
      EffectsModule.forFeature([AuthEffects])
    ],
    providers: [AuthEffects]
  })
  export class AuthStoreModule {}
  </code></pre>
  
  <p>... same for <code>customers-store.module</code> and other store modules</p>
  
  <p><strong>store.module</strong></p>
  
  <pre><code>    @NgModule({
        imports: [
         AuthStoreModule,
         CustomersStoreModule,
         ...
         StoreModule.forRoot({}),
         StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
         EffectsModule.forRoot([])
        ]})
  export class StoreModule {}
  </code></pre>
  
  <p>file structure for feature modules</p>
  
  <pre><code>app
   ui-components
     ....
     - header.component.ts
     - ui-components.module.ts
   dashboard
     .... 
     - dashboard.module.ts
   customers (lazy loaded)
     ....
     - customers-routing.module.ts
     - customers.module.ts
   router
     ....
    - router.module.ts
  </code></pre>
  
  <p><strong>customers-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [ ... ]
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  export class CustomersRoutingModule { }
  </code></pre>
  
  <p><strong>customers.module.ts</strong></p>
  
  <pre><code>@NgModule({
    imports: [
    .... ,
    CustomersRoutingModule
  ]})
  export class CustomersModule { }
  </code></pre>
  
  <p><strong>router.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [ 
    {
      path: '',
      loadChildren: '../customers/customers.module#CustomersModule'
    },
   {
     path: '',
     redirectTo: '/dashboard',
     pathMatch: 'full'
   },
    ....
   ]
  @NgModule({
    imports: [
      StoreModule,
      RouterModule.forRoot(routes, {
        useHash: false
      })
    ],
    exports: [
      RouterModule
    ]
  })
  export class AppRouterModule { }
  </code></pre>
  
  <p>The <code>header.component.ts</code> (and the whole <code>ui-components</code> module) is shared among the lazy loaded customers component and the dashboard component. When I navigate to dashboard the <code>header.component</code> loads the user information located in <code>AuthStore</code>.
  When I navigate to the lazy-loaded customers component the customers are retrieved correctly in the <code>customersStore</code>, the auth effects and reducers run but it seems they are on a different scope somehow. Thus the <code>header.component</code> never retrieves the user object but the <code>customers.component</code> retrieves the customers collection correctly. In redux devTools the store is cleared and only the actions that originate from the lazy-loaded component are shown. The actions from the common component are never shown (but the code is run nonetheless).</p>