fix: initialize RouterHistoryStore on app initialization

Author: LayZeeDK

packages/router-component-store/src/lib/router-history-store/router-history.store.spec.ts

@@ -4,6 +4,7 @@ import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { firstValueFrom } from 'rxjs';
 import {
   provideRouterHistoryStore,
   RouterHistoryStore,
@@ -21,13 +22,13 @@ function createTestComponent(name: string, selector: string) {
   selector: 'ngw-test-app',
   imports: [AsyncPipe, NgIf, RouterLink, RouterOutlet],
   template: `
-    <!-- <a
+    <a
       id="back-link"
       *ngIf="routerHistory.previousUrl$ | async as previousUrl"
-      (click)="onBack()"
-      >Back</a
-    > -->
-    <a id="back-link" (click)="onBack()">Back</a>
+      [href]="previousUrl"
+      (click)="onBack($event)"
+      >&lt; Back</a
+    >
 
     <a id="home-link" routerLink="/">Home</a>
     <a id="about-link" routerLink="about">About</a>
@@ -42,7 +43,8 @@ class TestAppComponent {
 
   protected routerHistory = inject(RouterHistoryStore);
 
-  onBack() {
+  onBack(event: MouseEvent) {
+    event.preventDefault();
     this.#location.back();
   }
 }
@@ -101,14 +103,6 @@ describe(RouterHistoryStore.name, () => {
     expect.assertions(2);
 
     const { click, routerHistory } = await setup();
-    let currentUrl: string | undefined;
-    routerHistory.currentUrl$.subscribe((url) => {
-      currentUrl = url;
-    });
-    let previousUrl: string | null | undefined;
-    routerHistory.previousUrl$.subscribe((url) => {
-      previousUrl = url;
-    });
 
     // At Home
     await click('#about-link');
@@ -118,22 +112,14 @@ describe(RouterHistoryStore.name, () => {
     await click('#products-link');
     // At Products
 
-    expect(currentUrl).toBe('/products');
-    expect(previousUrl).toBe('/company');
+    expect(await firstValueFrom(routerHistory.currentUrl$)).toBe('/products');
+    expect(await firstValueFrom(routerHistory.previousUrl$)).toBe('/company');
   });
 
   it('the URLs behave like the History API when navigating back', async () => {
     expect.assertions(2);
 
     const { click, routerHistory } = await setup();
-    let currentUrl: string | undefined;
-    routerHistory.currentUrl$.subscribe((url) => {
-      currentUrl = url;
-    });
-    let previousUrl: string | null | undefined;
-    routerHistory.previousUrl$.subscribe((url) => {
-      previousUrl = url;
-    });
 
     // At Home
     await click('#about-link');
@@ -143,22 +129,14 @@ describe(RouterHistoryStore.name, () => {
     await click('#back-link');
     // At About
 
-    expect(currentUrl).toBe('/about');
-    expect(previousUrl).toBe('/home');
+    expect(await firstValueFrom(routerHistory.currentUrl$)).toBe('/about');
+    expect(await firstValueFrom(routerHistory.previousUrl$)).toBe('/home');
   });
 
   it('the URLs behave like the History API when navigating back then using links', async () => {
     expect.assertions(2);
 
     const { click, routerHistory } = await setup();
-    let currentUrl: string | undefined;
-    routerHistory.currentUrl$.subscribe((url) => {
-      currentUrl = url;
-    });
-    let previousUrl: string | null | undefined;
-    routerHistory.previousUrl$.subscribe((url) => {
-      previousUrl = url;
-    });
 
     // At Home
     await click('#about-link');
@@ -170,7 +148,7 @@ describe(RouterHistoryStore.name, () => {
     await click('#products-link');
     // At Products
 
-    expect(currentUrl).toBe('/products');
-    expect(previousUrl).toBe('/about');
+    expect(await firstValueFrom(routerHistory.currentUrl$)).toBe('/products');
+    expect(await firstValueFrom(routerHistory.previousUrl$)).toBe('/about');
   });
 });

packages/router-component-store/src/lib/router-history-store/router-history.store.ts

@@ -1,9 +1,18 @@
-import { inject, Injectable, Provider } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  FactoryProvider,
+  inject,
+  Injectable,
+  Provider,
+} from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { ComponentStore, provideComponentStore } from '@ngrx/component-store';
 import { filter, Observable } from 'rxjs';
 
 interface RouterHistoryState {
+  /**
+   * The history of all navigations.
+   */
   readonly history: NavigationHistory;
 }
 
@@ -12,8 +21,17 @@ type NavigationHistory = Record<number, NavigationSequence>;
 type NavigationSequence = PendingNavigation | CompleteNavigation;
 type PendingNavigation = readonly [NavigationStart];
 
+/**
+ * Provide and initialize the `RouterHistoryStore`.
+ *
+ * @remarks
+ * Must be provided by the root injector to capture all navigation events.
+ */
 export function provideRouterHistoryStore(): Provider[] {
-  return [provideComponentStore(RouterHistoryStore)];
+  return [
+    provideComponentStore(RouterHistoryStore),
+    routerHistoryStoreInitializer,
+  ];
 }
 
 // TODO(@LayZeeDK): Handle `NavigationCancel` and `NavigationError` events
@@ -49,26 +67,45 @@ export function provideRouterHistoryStore(): Provider[] {
 export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
   #router = inject(Router);
 
+  /**
+   * The history of all navigations.
+   */
   #history$ = this.select((state) => state.history).pipe(
     filter((history) => Object.keys(history).length > 0)
   );
+  /**
+   * All `NavigationEnd` events.
+   */
   #navigationEnd$: Observable<NavigationEnd> = this.#router.events.pipe(
     filter((event): event is NavigationEnd => event instanceof NavigationEnd)
   );
+  /**
+   * All `NavigationStart` events.
+   */
   #navigationStart$: Observable<NavigationStart> = this.#router.events.pipe(
     filter(
       (event): event is NavigationStart => event instanceof NavigationStart
     )
   );
 
-  #maxCompletedNavigationId$ = this.select(this.#history$, (history) =>
-    Number(
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      Object.entries(history)
-        .reverse()
-        .find(([, navigation]) => navigation.length === 2)![0]
-    )
+  /**
+   * The navigation ID of the most recent completed navigation.
+   */
+  #maxCompletedNavigationId$ = this.select(
+    this.#history$.pipe(filter((history) => (history[1] ?? []).length > 1)),
+    (history) =>
+      Number(
+        // This callback is only triggered when at least one navigation has
+        // completed
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        Object.entries(history)
+          .reverse()
+          .find(([, navigation]) => navigation.length === 2)![0]
+      )
   );
+  /**
+   * The most recent completed navigation.
+   */
   #latestCompletedNavigation$ = this.select(
     this.#maxCompletedNavigationId$,
     this.#history$,
@@ -79,10 +116,19 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     }
   );
 
+  /**
+   * The current URL.
+   */
   currentUrl$: Observable<string> = this.select(
     this.#latestCompletedNavigation$,
     ([, end]) => end.urlAfterRedirects
   );
+  /**
+   * The previous URL when taking `popstate` events into account.
+   *
+   * `undefined` is emitted when the current navigation is the first in the
+   * navigation history.
+   */
   previousUrl$: Observable<string | undefined> = this.select(
     this.#history$,
     this.#maxCompletedNavigationId$,
@@ -95,6 +141,11 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
         maxCompletedNavigationId,
         history
       );
+
+      if (completedNavigationSourceStart.id === 1) {
+        return undefined;
+      }
+
       const previousNavigationId = completedNavigationSourceStart.id - 1;
       const [, previousNavigationSourceEnd] = this.#getNavigationSource(
         previousNavigationId,
@@ -115,6 +166,9 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     this.#addNavigationEnd(this.#navigationEnd$);
   }
 
+  /**
+   * Add a `NavigationEnd` event to the navigation history.
+   */
   #addNavigationEnd = this.updater<NavigationEnd>(
     (state, event): RouterHistoryState => ({
       ...state,
@@ -125,6 +179,9 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     })
   );
 
+  /**
+   * Add a `NavigationStart` event to the navigation history.
+   */
   #addNavigationStart = this.updater<NavigationStart>(
     (state, event): RouterHistoryState => ({
       ...state,
@@ -135,6 +192,16 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     })
   );
 
+  /**
+   * Search the specified navigation history to find the source of the
+   * specified navigation event.
+   *
+   * This takes `popstate` navigation events into account.
+   *
+   * @param navigationId The ID of the navigation to trace.
+   * @param history The navigation history to search.
+   * @returns The source navigation.
+   */
   #getNavigationSource(
     navigationId: number,
     history: NavigationHistory
@@ -144,16 +211,37 @@ export class RouterHistoryStore extends ComponentStore<RouterHistoryState> {
     while (navigation[0].navigationTrigger === 'popstate') {
       navigation =
         history[
+          // Navigation events triggered by `popstate` always have a
+          // `restoredState`
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           navigation[0].restoredState!.navigationId
         ];
-      navigationId = navigation[0].id;
     }
 
     return navigation as CompleteNavigation;
   }
 }
 
-export const initialState: RouterHistoryState = {
+/**
+ * The initial internal state of the `RouterHistoryStore`.
+ */
+const initialState: RouterHistoryState = {
   history: [],
 };
+
+const initializeRouterHistoryStoreFactory =
+  // Inject the RouterHistoryStore to eagerly initialize it.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_initializedRouterHistoryStore: RouterHistoryStore) => (): void => undefined;
+/**
+ * Eagerly initialize the `RouterHistoryStore` to subscribe to all relevant
+ * router navigation events.
+ */
+const routerHistoryStoreInitializer: FactoryProvider = {
+  provide: APP_INITIALIZER,
+  multi: true,
+  deps: [RouterHistoryStore],
+  useFactory:
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    initializeRouterHistoryStoreFactory,
+};