The router store is in an NPM package and we can therefore type the following to install it:
npm install @ngrx/router-store --save
The next thing we need to do is to import the correct modules and set those up in the import properties of our root module, like so:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injectable } from '@angular/core';
import { StoreModule, Action } from '@ngrx/store';
import { AppComponent } from './app.component';
import { counterReducer } from './reducer';
import { TodoModule } from './todo/todo.module';
import { todosReducer } from './todo/reducer';
import { JediModule } from './jedi/jedi.module';
import { jediListReducer } from './jedi/list.reducer';
import { productsReducer } from './products/products.reducer';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { ProductsModule } from './products/products.module';
import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store';
import { RouterModule } from '@angular/router';
import { TestingComponent } from './testing.component';
import { Effect, ofType, Actions } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';
import { switchMap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { EffectsModule } from '@ngrx/effects';
@NgModule({
declarations: [AppComponent, TestingComponent],
imports: [
BrowserModule,
StoreModule.forRoot({
count: counterReducer,
todos: todosReducer,
jediList: jediListReducer,
products: productsReducer,
router: routerReducer
}),
EffectsModule.forRoot([]),
RouterModule.forRoot([{ path: 'testing', component: TestingComponent }]),
StoreRouterConnectingModule.forRoot({
stateKey: 'router' // name of reducer key
}),
StoreDevtoolsModule.instrument({
maxAge: 25 // Retains last 25 states
}),
TodoModule,
JediModule,
ProductsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
We don't do a lot here. We call the forRoot() method on the StoreRouterConnectingModule, and we also add a new reducer entry in the form of a router that points to routerReducer as the reducer that will handle any changes to the router property.