Ngrx with lazy load modules

Question

Let assume in my application I have the following lazy loading modules:

• Login module
• Admin module

App-routing.module.ts `

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [AdminGuard]}]

`

In the LoginModule I've created StoreModule.forFeature('login', fromLogin.authReducer) .

After successful login program redirects to the Admin page(Module) .

And the store dispatching new action: this.store.dispatch(login({some object})); Everything works fine.

---

Problem

When I try to refresh page on the admin module I will lost store from LoginModule .

As you can see in the routing module I'm using Guard canLoad logic inside guard should change state in the LoginModule store but after refresh page I lost it.

---

Works fine and change state in the LoginModule :

---

Doesn't work after refresh page on the AdminModule the store is empty:

Answer 1

A possible solution would be to place your store management code in the shared module, as it is shared amongst all the lazy loaded feature modules (if you never used a shared module, you can look at this link for reference). Note that you'll need to import the shared module in the app module.

If you are starting now a new project, I will advise you to check out NGXS which is an alternative to NgRX. I have encountered many programmers who decided to migrate their code from NgRX to NGXS, as it eases the complexity of state management.