title: NgRx: CustomRouterStateSerializer serialize() called multiple times
body: <p>I have implemented a NgRx Router-Store for my Angular project in the common way (<a href="https://ngrx.io/guide/router-store/configuration" rel="nofollow noreferrer">https://ngrx.io/guide/router-store/configuration</a>).</p>
  
  <p>My "Problem" is that the serialize-method of my <code>CustomRouterStateSerializer</code> seems to be called multiple times, when a routerLink gets triggered by clicking the corresponding html element of a component.</p>
  
  <p>You'll find a minimal example application of the following description on <a href="https://stackblitz.com/github/rweisse/router-store-test" rel="nofollow noreferrer">StackBlitz</a>.</p>
  
  <hr>
  
  <p><strong>My implementation</strong></p>
  
  <p>This is my <code>router.reducer.ts</code> file which contains the RouterStateUrl-Interface and the Serializer-Class:</p>
  
  <pre class="lang-js prettyprint-override"><code>export interface RouterStateUrl  {
      url: string;
      queryParams: Params;
      params: Params;
      random: number;
  }
  
  export class CustomRouterStateSerializer implements RouterStateSerializer&lt;RouterStateUrl &gt; {
      serialize(routerState: RouterStateSnapshot): RouterStateUrl  {
          const { url, root: { queryParams } } = routerState;
  
          // Random number to be able to match console output to router-state later (with NgRx Store DevTools)
          const random = Math.random();
          console.warn(`CustomRouterStateSerializer called by ${url}, random: ${random}`);
  
          let state: ActivatedRouteSnapshot = routerState.root;
          while(state.firstChild){
              state = state.firstChild;
          }
          const { params } = state;
          return {url, queryParams, params, random };
      }
  }
  </code></pre>
  
  <p>This is my <code>app.module.ts</code> file:</p>
  
  <pre class="lang-js prettyprint-override"><code>/*[...]*/
  imports: [
      /*[...],*/
      StoreModule.forRoot(reducers, {
          metaReducers,
          runtimeChecks: {
              strictStateImmutability: true,
              strictActionImmutability: true
          }
      }),
      StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.development }),
      EffectsModule.forRoot([AppEffects]),
      StoreRouterConnectingModule.forRoot({
          serializer: CustomRouterStateSerializer,
          navigationActionTiming: NavigationActionTiming.PostActivation,
      }),
  ]
  /*[...]*/
  
  </code></pre>
  
  <hr>
  
  <p><strong>Detailed description and output</strong></p>
  
  <p>Lets say my app currently displays an overview of some projects (url: /projects) and a routerLink gets triggert to switch the component to show an overview of jobs (url: /jobs). The console will print three messages:</p>
  
  <ul>
  <li><p><code>CustomRouterStateSerializer called by /projects, random: 0.0896547559010431</code></p></li>
  <li><p><code>CustomRouterStateSerializer called by /jobs, random: 0.7662025752972623</code></p></li>
  <li><p><code>CustomRouterStateSerializer called by /jobs, random: 0.07919176016307328</code></p></li>
  </ul>
  
  <p>NgRx Store DevTools are showing several Actions as expected:</p>
  
  <p><code>@ngrx/router-store/request</code></p>
  
  <pre><code>router: {
      state: {
          url: '/projects',
          queryParams: {},
          params: {},
          random: 0.31957045879116797
      },
      navigationId: 2
  }
  </code></pre>
  
  <p><code>@ngrx/router-store/navigation</code></p>
  
  <pre><code>router: {
      state: {
          url: '/jobs',
          queryParams: {},
          params: {},
          random: 0.7662025752972623
      },
      navigationId: 3
  }
  </code></pre>
  
  <p><code>@ngrx/router-store/navigated</code></p>
  
  <pre><code>router: {
      state: {
        url: '/jobs',
        queryParams: {},
        params: {},
        random: 0.7662025752972623
      },
      navigationId: 3
  }
  </code></pre>
  
  <p>As you can see the state of <code>@ngrx/router-store/navigation</code> and <code>@ngrx/router-store/navigated</code> are identical. Furthermore their random number is identical to the second console output. The random number of <code>@ngrx/router-store/request</code> belongs to the state of the old projects-view.</p>
  
  <p>The output of NgRx Store DevTools seem to be as expected. But I don't understand when and what called the serialize method where the other console outputs were triggert. I can not find any random numbers of the first and the third console output in any state. Now I'm asking myself if I have made an error (implementing stuff) or if this is just normal behaviour (but why?). Maybe some of you can tell me.</p>