feat(router-store): config option to dispatch ROUTER_NAVIGATION later

Part of #1263

Author: dummdidumm

modules/router-store/spec/integration.spec.ts

@@ -644,6 +644,44 @@ describe('integration spec', () => {
         done();
       });
   });
+
+  it('should dispatch ROUTER_NAVIGATION later when config options set to true', () => {
+    const reducer = (state: string = '', action: RouterAction<any>) => {
+      if (action.type === ROUTER_NAVIGATION) {
+        return action.payload.routerState.url.toString();
+      } else {
+        return state;
+      }
+    };
+
+    createTestModule({
+      reducers: { reducer },
+      config: { dispatchNavActionOnEnd: true },
+    });
+
+    const router: Router = TestBed.get(Router);
+    const log = logOfRouterAndActionsAndStore();
+
+    router.navigateByUrl('/').then(() => {
+      expect(log).toEqual([
+        { type: 'store', state: '' }, // init event. has nothing to do with the router
+        { type: 'store', state: '' }, // ROUTER_REQUEST event in the store
+        { type: 'action', action: ROUTER_REQUEST },
+        { type: 'router', event: 'NavigationStart', url: '/' },
+        { type: 'router', event: 'RoutesRecognized', url: '/' },
+        /* new Router Lifecycle in Angular 4.3 */
+        { type: 'router', event: 'GuardsCheckStart', url: '/' },
+        { type: 'router', event: 'GuardsCheckEnd', url: '/' },
+        { type: 'router', event: 'ResolveStart', url: '/' },
+        { type: 'router', event: 'ResolveEnd', url: '/' },
+        { type: 'store', state: '/' }, // ROUTER_NAVIGATION event in the store
+        { type: 'action', action: ROUTER_NAVIGATION },
+        { type: 'store', state: '/' }, // ROUTER_NAVIGATED event in the store
+        { type: 'action', action: ROUTER_NAVIGATED },
+        { type: 'router', event: 'NavigationEnd', url: '/' },
+      ]);
+    });
+  });
 });
 
 function createTestModule(

modules/router-store/src/router_store_module.ts

@@ -176,6 +176,13 @@ export function routerReducer<
 export interface StoreRouterConfig {
   stateKey?: string;
   serializer?: new () => RouterStateSerializer;
+  /**
+   * By default, ROUTER_NAVIGATION is dispatched before guards and resolvers run.
+   * Therefore, the action could run too soon, for example
+   * there may be a navigation cancel due to a guard saying the navigation is not allowed.
+   * To run ROUTER_NAVIGATION after guards and resolvers, set this property to true.
+   */
+  dispatchNavActionOnEnd?: boolean;
 }
 
 export const _ROUTER_CONFIG = new InjectionToken(
@@ -200,6 +207,7 @@ export function _createRouterConfig(
   return {
     stateKey: DEFAULT_ROUTER_FEATURENAME,
     serializer: DefaultRouterStateSerializer,
+    dispatchNavActionOnEnd: false,
     ..._config,
   };
 }
@@ -342,15 +350,19 @@ export class StoreRouterConnectingModule {
   }
 
   private setUpRouterEventsListener(): void {
+    const dispatchNavLate = this.config.dispatchNavActionOnEnd;
+    let routesRecognized: RoutesRecognized;
+
     this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
         if (this.trigger !== RouterTrigger.STORE) {
           this.dispatchRouterRequest(event);
         }
       } else if (event instanceof RoutesRecognized) {
+        routesRecognized = event;
         this.routerState = this.serializer.serialize(event.state);
 
-        if (this.trigger !== RouterTrigger.STORE) {
+        if (!dispatchNavLate && this.trigger !== RouterTrigger.STORE) {
           this.dispatchRouterNavigation(event);
         }
       } else if (event instanceof NavigationCancel) {
@@ -359,6 +371,9 @@ export class StoreRouterConnectingModule {
         this.dispatchRouterError(event);
       } else if (event instanceof NavigationEnd) {
         if (this.trigger !== RouterTrigger.STORE) {
+          if (dispatchNavLate) {
+            this.dispatchRouterNavigation(routesRecognized);
+          }
           this.dispatchRouterNavigated(event);
         }
         this.trigger = RouterTrigger.NONE;