perf: ignore non-essential router events (#306)

# Performance optimizations - Ignore non-essential router events when serializing the router state. Only `NavigationStart`, `RoutesRecognized`, `NavigationEnd`, `NavigationCancel`, and `NavigationError` events are essential.
ngworker · Jan 3, 2023 · a0216cc · a0216cc
1 parent 33606a6
commit a0216cc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/packages/router-component-store/src/lib/global-router-store/global-router-store.ts b/packages/router-component-store/src/lib/global-router-store/global-router-store.ts
@@ -1,5 +1,15 @@
 import { inject, Injectable, Type } from '@angular/core';
-import { Data, Event as RouterEvent, Params, Router } from '@angular/router';
+import {
+  Data,
+  Event as RouterEvent,
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Params,
+  Router,
+  RoutesRecognized,
+} from '@angular/router';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, Observable } from 'rxjs';
 import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal-activated-route-state-snapshot';
@@ -72,7 +82,13 @@ export class GlobalRouterStore
     });
 
     this.#updateRouterState(
-      this.#router.events.pipe(
+      this.selectRouterEvents(
+        NavigationStart,
+        RoutesRecognized,
+        NavigationEnd,
+        NavigationCancel,
+        NavigationError
+      ).pipe(
         map(() => this.#serializer.serialize(this.#router.routerState.snapshot))
       )
     );

diff --git a/packages/router-component-store/src/lib/local-router-store/local-router-store.ts b/packages/router-component-store/src/lib/local-router-store/local-router-store.ts
@@ -3,8 +3,13 @@ import {
   ActivatedRoute,
   Data,
   Event as RouterEvent,
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
   Params,
   Router,
+  RoutesRecognized,
 } from '@angular/router';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, Observable } from 'rxjs';
@@ -71,7 +76,13 @@ export class LocalRouterStore
     });
 
     this.#updateRouterState(
-      this.#router.events.pipe(
+      this.selectRouterEvents(
+        NavigationStart,
+        RoutesRecognized,
+        NavigationEnd,
+        NavigationCancel,
+        NavigationError
+      ).pipe(
         map(() => this.#serializer.serialize(this.#router.routerState.snapshot))
       )
     );