[NgRx] Setting up NgRx Router Store and the Time-Travelling Debugger

Make sure you have the@ngrx packages installed:

    "@ngrx/data": "^8.0.1",
    "@ngrx/effects": "^8.0.1",
    "@ngrx/entity": "^8.0.1",
    "@ngrx/router-store": "^8.0.1",
    "@ngrx/store": "^8.0.1",
    "@ngrx/store-devtools": "^8.0.1",

 

To enable time travel debugging, you need to import:

app.module.ts

  imports: [
    ...
    StoreRouterConnectingModule.forRoot({
      stateKey: "router", // key will be "router"
      routerState: RouterState.Minimal // the content to be saved into store will be minimal
    })
  ],

 

Enable add reducer for router:

reducers/index.ts

import { routerReducer } from "@ngrx/router-store";


export const reducers: ActionReducerMap = {
  router: routerReducer
};