RouteNavigation is fired multiple times for nested routing

[Danilo Hoffmann]

Hi,

when using the ngrx-router with nested routing (multiple <router-outlet>) the RouteNavigation action is fired multiple times. I think it should only fire once when the routing is concluded.

test case:

import { Component, Injectable } from '@angular/core';
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { Actions, Effect, EffectsModule, ofType } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { ROUTER_NAVIGATION_TYPE, RouterEffects } from 'ngrx-router';
import { tap } from 'rxjs/operators';

@Injectable()
class DebugEffects {
  count = 0;
  constructor(private actions$: Actions) {}
  @Effect({ dispatch: false })
  countRouteEvents$ = this.actions$.pipe(
    ofType(ROUTER_NAVIGATION_TYPE), 
    tap(console.log), 
    tap(() => this.count++)
  );
}

describe('Ngrx Router Integration', () => {
  let router: Router;
  let debugEffects: DebugEffects;

  beforeEach(() => {
    @Component({ template: 'dummy' })
    class DummyComponent {}

    TestBed.configureTestingModule({
      declarations: [DummyComponent],
      imports: [
        StoreModule.forRoot({}),
        EffectsModule.forRoot([DebugEffects, RouterEffects]),
        RouterTestingModule.withRoutes([
          {
            path: 'a',
            component: DummyComponent,
            children: [{ path: 'b', component: DummyComponent }],
          },
        ]),
      ],
    });
    router = TestBed.get(Router);
    debugEffects = TestBed.get(DebugEffects);
  });

  it('fires twice on /a/b', fakeAsync(() => {
    router.navigate(['/a/b']);
    tick(1000);

    expect(debugEffects.count).toBe(2);
  }));
});

correspondig log output:

  console.log node_modules/rxjs/internal/operators/tap.js:103
    RouteNavigation {
      payload: { params: {}, queryParams: {}, path: 'a' },
      type: '[Router] Navigation' }


  console.log node_modules/rxjs/internal/operators/tap.js:103
    RouteNavigation {
      payload: { params: {}, queryParams: {}, path: 'a/b' },
      type: '[Router] Navigation' }


PASS src/app/core/store/routing-data/ngrx-router.integration.spec.ts

  Ngrx Router Integration
    ✓ fires twice on /a/b (47ms)