docs(RouterStore): Document forRoot method and configuration options (#…

…702)

Closes #593

docs/router-store/README.md

@@ -7,14 +7,13 @@ Install @ngrx/router-store from npm:
 
 `npm install @ngrx/router-store --save` OR `yarn add @ngrx/router-store`
 
-
 ### Nightly builds
 
 `npm install github:ngrx/router-store-builds` OR `yarn add github:ngrx/router-store-builds`
 
 ## Usage
 
-During the navigation, before any guards or resolvers run, the router will dispatch a `ROUTER_NAVIGATION` action, which has the signature `RouterNavigationAction`:
+During the navigation, before any guards or resolvers run, the router will dispatch a `ROUTER_NAVIGATION` action, which has the signature `RouterNavigationAction<T>`:
 
 ```ts
 /**
@@ -24,6 +23,7 @@ export declare type RouterNavigationPayload<T> = {
   routerState: T;
   event: RoutesRecognized;
 };
+
 /**
  * An action dispatched when the router navigates.
  */
@@ -48,16 +48,21 @@ import { AppComponent } from './app.component';
 @NgModule({
   imports: [
     BrowserModule,
-    StoreModule.forRoot({ routerReducer: routerReducer }),
+    StoreModule.forRoot({
+      router: routerReducer
+    }),
     RouterModule.forRoot([
       // routes
     ]),
-    StoreRouterConnectingModule.forRoot()
+    StoreRouterConnectingModule.forRoot({
+      stateKey: 'router' // name of reducer key
+    })
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
 ```
+
 ## API Documentation
 - [Navigation actions](./api.md#navigation-actions)
 - [Effects](./api.md#effects)

docs/router-store/api.md

@@ -96,7 +96,7 @@ issues when used with the Store Devtools. In most cases, you may only need a pie
 
 Additionally, the router state snapshot is a mutable object, which can cause issues when developing with [store freeze](https://github.com/brandonroberts/ngrx-store-freeze) to prevent direct state mutations. This can be avoided by using a custom serializer.
 
-To use the time-traveling debugging in the Devtools, you must return an object containing the `url` when using the `routerReducer`.
+**NOTE**: To use the time-traveling debugging in the Devtools with router-store, you must return an object containing a `url` property when using the `routerReducer`.
 
 ```ts
 import { StoreModule, ActionReducerMap } from '@ngrx/store';
@@ -115,19 +115,19 @@ export interface RouterStateUrl {
 }
 
 export interface State {
-  routerReducer: RouterReducerState<RouterStateUrl>;
+  router: RouterReducerState<RouterStateUrl>;
 }
 
 export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
   serialize(routerState: RouterStateSnapshot): RouterStateUrl {
     let route = routerState.root;
+
     while (route.firstChild) {
       route = route.firstChild;
     }
 
-    const { url } = routerState;
-    const queryParams = routerState.root.queryParams;
-    const params = route.params;
+    const { url, root: { queryParams } } = routerState;
+    const { params } = route;
 
     // Only return an object including the URL, params and query params
     // instead of the entire snapshot
@@ -136,7 +136,7 @@ export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
 }
 
 export const reducers: ActionReducerMap<State> = {
-  routerReducer: routerReducer
+  router: routerReducer
 };
 
 @NgModule({
@@ -145,7 +145,9 @@ export const reducers: ActionReducerMap<State> = {
     RouterModule.forRoot([
       // routes
     ]),
-    StoreRouterConnectingModule
+    StoreRouterConnectingModule.forRoot({
+      stateKey: 'router'
+    })
   ],
   providers: [
     { provide: RouterStateSerializer, useClass: CustomSerializer }

example-app/app/app.module.ts

@@ -45,7 +45,13 @@ import { environment } from '../environments/environment';
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.
      */
-    StoreRouterConnectingModule,
+    StoreRouterConnectingModule.forRoot({
+      /*
+        They stateKey defines the name of the state used by the router-store reducer.
+        This matches the key defined in the map of reducers
+      */
+      stateKey: 'router',
+    }),
 
     /**
      * Store devtools instrument the store retaining past versions of state

example-app/app/reducers/index.ts

@@ -31,7 +31,7 @@ import * as fromLayout from '../core/reducers/layout';
  */
 export interface State {
   layout: fromLayout.State;
-  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
+  router: fromRouter.RouterReducerState<RouterStateUrl>;
 }
 
 /**
@@ -41,7 +41,7 @@ export interface State {
  */
 export const reducers: ActionReducerMap<State> = {
   layout: fromLayout.reducer,
-  routerReducer: fromRouter.routerReducer,
+  router: fromRouter.routerReducer,
 };
 
 // console.log all actions

example-app/app/shared/utils.ts

@@ -12,15 +12,24 @@ import { RouterStateSnapshot, Params } from '@angular/router';
 
 export interface RouterStateUrl {
   url: string;
+  params: Params;
   queryParams: Params;
 }
 
 export class CustomRouterStateSerializer
   implements RouterStateSerializer<RouterStateUrl> {
   serialize(routerState: RouterStateSnapshot): RouterStateUrl {
-    const { url } = routerState;
-    const queryParams = routerState.root.queryParams;
+    let route = routerState.root;
 
-    return { url, queryParams };
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+
+    const { url, root: { queryParams } } = routerState;
+    const { params } = route;
+
+    // Only return an object including the URL, params and query params
+    // instead of the entire snapshot
+    return { url, params, queryParams };
   }
 }