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. Git服务器搭建--ssh/http

    测试环境 Windows 7 Ultimate, 64-bit 6.1.7601, Service Pack 1(实体机,虚拟机VMware的宿主机) VMware® Workstation 7.1. ...

  2. QT json数据的应用(cJSON)

    json数据可保存小量的数据在本地的json文件中.QT有两种方式操作:(1).cJSON (2).QT的操作json数据的类. 应用:将监控预案数据保存在本地中. 1.首先根据预案结构创建一个jso ...

  3. 1183: 零起点学算法90——海选女主角(C语言)

    一.题目 http://acm.wust.edu.cn/problem.php?id=1183&soj=0 二.分析 从描述来看,就是找出一个二维数组中绝对值最大的数: 带符号的32位整数,刚 ...

  4. matplotlib实例笔记

    下面的图型是在一幅画布上建立的四个球员相关数据的极坐标图 关于这个图的代码如下: #_*_coding:utf-8_*_ import numpy as np import matplotlib.py ...

  5. Docker 方式部署的应用的版本更新

    前言 公司使用 Docker-Compose 的方式部署 Jenkins/Gitlab/Sonar/Confluence/Apollo/Harbor/ELK/MySQL 等一系列开发工具/数据库. 而 ...

  6. create-react-app中的一些功能配置

    1. 根路径别名@ 1. npm run eject调出配置文件.找到webpack.config.js,搜索到,alias,在下面添加一行键值对'@':paths.appSrc, alias: { ...

  7. 立体像对空间前方交会-共线方程求解法(python实现)

    一.原理 二.步骤 a.用各自像片的角元素计算出左右像片的旋转矩阵R1和R2. b.有同名像点列出共线方程. c.将方程写为未知数的线性方程形式,计算线性系数. d.写出误差方程,系数矩阵与常数项. ...

  8. 怎样获取当前页面框架的数量(即iframe和frame的数量)

    需要使用window.length, 或者window.frames.length; 如果页面中不包含frame和iframe元素, 则返回0; window.length === window.fr ...

  9. RVA与RWA的关系

    RVA与RWA的关系 原理比较简单:首先判断这个地址是否在PE头中,如果在,文件偏移和内存偏移相等,如果存在于文件的区段中,则利用以下公式: 内存偏移 - 该段起始的RVA(VirtualAddres ...

  10. js 遍历树的层级关系的实现

    1.遍历树的层级关系 1)先整理数据 2)找到id和数据的映射关系 3)然后找到父节点的数据,进行存储 test() { const list = [ { id: ", parentId: ...