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<AppState> = {
router: routerReducer
};

[NgRx] Setting up NgRx Router Store and the Time-Travelling Debugger的更多相关文章

  1. ngrx/store effects 使用总结1:计数器

    本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀 ...

  2. Angular应用架构设计-3:Ngrx Store

    这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...

  3. 如何在AngularX 中 使用ngrx

    ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...

  4. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  5. 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2

    翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...

  6. Redux 和 ngrx 创建更佳的 Angular 2

    Redux 和 ngrx 创建更佳的 Angular 2 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build- ...

  7. [Angulalr] Speed Up Reducer Development Using Ngrx Schematics

    When we use NGRX, we need to create some bolipates. Now with Angulalr6, we can use CLI to generate t ...

  8. [Angular] NgRx/effect, why to use it?

    See the current implementaion of code, we have a smart component, and inside the smart component we ...

  9. Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

随机推荐

  1. Spring Boot 入门(九):集成Quartz定时任务

    本片文章续<Spring Boot 入门(八):集成RabbitMQ消息队列>,关于Quartz定时任务请参考<Quartz的基本使用之入门(2.3.0版本)> spring ...

  2. Ctex ERROR Reading

    提供一个"Ctex ERROR Reading"的处理办法 方法/步骤: 1. 再我们打开一些网上下载的文档的时候可能出现错误提示 2. 这种问题一般是文件编码的问题,我们需要选择 ...

  3. Python21之内嵌函数和闭包

    一.内嵌函数 内嵌函数指的是在一个函数体内部定义的函数,可以称它为函数的函数,也就是子函数,外部的函数称之为母函数,就类似局部变量和全局变量 子函数体内定义的变量只在其函数内部有效,但其内部可以调用母 ...

  4. 从零开始学Flask框架-007

    Flash消息 from flask import flash 渲染Flash消息,在基模板base.html中引入get_flashed_messages() {% extends "bo ...

  5. WUSTOJ 1315: 杜学霸和谭女神(Java)

    题目链接:

  6. Linux中request_irq()中断申请与处理说明

    1.  中断的理解 中断你可以理解为就是一种电信号,是由硬件设备产生的然后发送给处理器,处理器接收到中断后,就会马上向操作系统反映此信号,之后就是系统的工作了. 这里有两个注意的地方,第一中断是随时都 ...

  7. Linux查询命令帮助信息(知道)

    方法一 command --help 方法二 man command 操作涉及到的按键: 空格键:显示手册的下一屏 Enter键:一次滚动手册的一行 b:回滚一屏 f:前滚一屏 q:退出 结果基本上全 ...

  8. 关于memset的赋值(最大值最小值的选择)

    memset赋值赋的是ASSCII码转为二进制赋值 比如 memset(,0xff,sizeof()),0xff转为二进制11111111,int为4字节所以最后为111111111111111111 ...

  9. mvc伪静态

    方法一:IIS配置伪静态 方法二:项目配置伪静态 网站配置文件Web.config <system.webServer> <handlers> <add name=&qu ...

  10. Asp.net Core 2.0 OpenId Connect Handler缺失Claims?

    原文:https://leastprivilege.com/2017/11/15/missing-claims-in-the-asp-net-core-2-openid-connect-handler ...