feat!: add MinimalActivatedRouteSnapshot#title and RouterStore#title$ (#291)

# Features
- Add required property `MinimalActivatedRouteSnapshot#title` to match
`ActivatedRouteSnapshot#title`
- Remove symbol index from `MinimalActivatedRoutesSnapshot#data` to make
it serializable
- Add `RouterStore#title$` selector with support for static and resolved
route titles

BREAKING CHANGE:
- `MinimalActivatedRouteSnapshot#title` is added as a required property
to match `ActivatedRouteSnapshot#title`.
- `MinimalActivatedRoutesSnapshot#data` has its symbol index removed to
make it serializable when a route title exists. This change is because
of the internal `Symbol(RouterTitle)` key added by the Angular Router.

Author: LayZeeDK

packages/router-component-store/src/lib/@ngrx/router-store/minimal_serializer.spec.ts

@@ -72,6 +72,7 @@ describe('minimal serializer', () => {
         pathMatch: `${prefix}-route.routeConfig.pathMatch`,
         redirectTo: `${prefix}-route.routeConfig.redirectTo`,
         outlet: `${prefix}-route.routeConfig.outlet`,
+        title: `${prefix}-route.routeConfig.title`,
       },
       firstChild: undefined,
     };
@@ -95,7 +96,9 @@ function createRouteSnapshot(prefix = 'root'): any {
   return {
     params: `${prefix}-route.params`,
     paramMap: `${prefix}-route.paramMap`,
-    data: `${prefix}-route.data`,
+    data: {
+      [`${prefix}-data`]: `${prefix}-route.data.${prefix}-data`,
+    },
     url: `${prefix}-route.url`,
     outlet: `${prefix}-route.outlet`,
     routeConfig: {
@@ -104,6 +107,7 @@ function createRouteSnapshot(prefix = 'root'): any {
       pathMatch: `${prefix}-route.routeConfig.pathMatch`,
       redirectTo: `${prefix}-route.routeConfig.redirectTo`,
       outlet: `${prefix}-route.routeConfig.outlet`,
+      title: `${prefix}-route.routeConfig.title`,
     },
     queryParams: `${prefix}-route.queryParams`,
     queryParamMap: `${prefix}-route.queryParamMap`,

packages/router-component-store/src/lib/@ngrx/router-store/minimal_serializer.ts

@@ -30,7 +30,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  Data,
+  RouterStateSnapshot,
+} from '@angular/router';
+
+type OmitSymbolIndex<TShape> = {
+  [TShapeKey in keyof TShape as symbol extends TShapeKey
+    ? never
+    : TShapeKey]: TShape[TShapeKey];
+};
+
+/**
+ * Serializable route `Data` without its symbol index, in particular without the
+ * `Symbol.for(RouteTitle)` key as this is an internal value for the Angular
+ * `Router`.
+ */
+export type MinimalRouteData = OmitSymbolIndex<Data>;
 
 /**
  * Contains the information about a route associated with a component loaded in
@@ -60,12 +77,22 @@ export interface MinimalActivatedRouteSnapshot {
   readonly fragment: ActivatedRouteSnapshot['fragment'];
   /**
    * The static and resolved data of this route.
+   *
+   * @remarks
+   * Contains serializable route `Data` without its symbol index, in particular
+   * without the `Symbol.for(RouteTitle)` key as this is an internal value for
+   * the Angular `Router`. Instead, we access the resolved route title through
+   * `MinimalActivatedRouteSnapshot['title']`.
    */
-  readonly data: ActivatedRouteSnapshot['data'];
+  readonly data: OmitSymbolIndex<ActivatedRouteSnapshot['data']>;
   /**
    * The outlet name of the route.
    */
   readonly outlet: ActivatedRouteSnapshot['outlet'];
+  /**
+   * The resolved route title.
+   */
+  readonly title: ActivatedRouteSnapshot['title'];
   /**
    * The first child of this route in the router state tree
    */
@@ -81,36 +108,56 @@ export interface MinimalRouterStateSnapshot {
   readonly url: string;
 }
 
+function objectFromEntries<TValue>(entries: [string, TValue][]): {
+  [key: string]: TValue;
+} {
+  return entries.reduce(
+    (object, [key, value]) => ({ ...object, [key]: value }),
+    {}
+  );
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class MinimalRouterStateSerializer {
   serialize(routerState: RouterStateSnapshot): MinimalRouterStateSnapshot {
     return {
-      root: this.serializeRoute(routerState.root),
+      root: this.#serializeRouteSnapshot(routerState.root),
       url: routerState.url,
     };
   }
 
-  private serializeRoute(
-    route: ActivatedRouteSnapshot
+  #serializeRouteData(routeData: Data): MinimalRouteData {
+    return objectFromEntries(Object.entries(routeData));
+  }
+
+  #serializeRouteSnapshot(
+    routeSnapshot: ActivatedRouteSnapshot
   ): MinimalActivatedRouteSnapshot {
-    const children = route.children.map((c) => this.serializeRoute(c));
+    const children = routeSnapshot.children.map((childRouteSnapshot) =>
+      this.#serializeRouteSnapshot(childRouteSnapshot)
+    );
     return {
-      params: route.params,
-      data: route.data,
-      url: route.url,
-      outlet: route.outlet,
-      routeConfig: route.routeConfig
+      params: routeSnapshot.params,
+      data: this.#serializeRouteData(routeSnapshot.data),
+      url: routeSnapshot.url,
+      outlet: routeSnapshot.outlet,
+      title: routeSnapshot.title,
+      routeConfig: routeSnapshot.routeConfig
         ? {
-            path: route.routeConfig.path,
-            pathMatch: route.routeConfig.pathMatch,
-            redirectTo: route.routeConfig.redirectTo,
-            outlet: route.routeConfig.outlet,
+            path: routeSnapshot.routeConfig.path,
+            pathMatch: routeSnapshot.routeConfig.pathMatch,
+            redirectTo: routeSnapshot.routeConfig.redirectTo,
+            outlet: routeSnapshot.routeConfig.outlet,
+            title:
+              typeof routeSnapshot.routeConfig.title === 'string'
+                ? routeSnapshot.routeConfig.title
+                : undefined,
           }
         : null,
-      queryParams: route.queryParams,
-      fragment: route.fragment,
+      queryParams: routeSnapshot.queryParams,
+      fragment: routeSnapshot.fragment,
       firstChild: children[0],
       children,
     };

packages/router-component-store/src/lib/global-router-store/global-router-store-selectors.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { Router, RouterOutlet, Routes } from '@angular/router';
+import { Route, Router, RouterOutlet, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { firstValueFrom } from 'rxjs';
 import { RouterStore } from '../router-store';
@@ -21,7 +21,14 @@ class DummyAppComponent {}
 class DummyLoginComponent {}
 
 describe(`${GlobalRouterStore.name} selectors`, () => {
-  beforeEach(async () => {
+  async function setup({
+    assertions = 1,
+    title,
+  }: {
+    readonly assertions?: number;
+    readonly title?: Route['title'];
+  } = {}) {
+    expect.assertions(assertions);
     const routes: Routes = [
       {
         path: 'login',
@@ -30,6 +37,7 @@ describe(`${GlobalRouterStore.name} selectors`, () => {
             path: ':id',
             component: DummyLoginComponent,
             data: { testData: 'test-data' },
+            title,
           },
         ],
       },
@@ -43,102 +51,127 @@ describe(`${GlobalRouterStore.name} selectors`, () => {
     const rootFixture = TestBed.createComponent(DummyAppComponent);
     rootFixture.autoDetectChanges(true);
 
-    router = TestBed.inject(Router);
-    store = TestBed.inject(RouterStore);
-  });
+    const router = TestBed.inject(Router);
+    const routerStore = TestBed.inject(RouterStore);
+
+    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
 
-  let router: Router;
-  let store: RouterStore;
+    return {
+      routerStore,
+    };
+  }
 
   it('exposes a selector for the current route', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup({
+      title: 'Static title',
+    });
 
-    await expect(firstValueFrom(store.currentRoute$)).resolves.toEqual({
+    await expect(firstValueFrom(routerStore.currentRoute$)).resolves.toEqual({
+      children: [],
+      data: {
+        testData: 'test-data',
+      },
+      fragment: 'test-fragment',
+      outlet: 'primary',
       params: {
         id: 'etyDDwAAQBAJ',
       },
-      data: {
-        testData: 'test-data',
+      queryParams: {
+        ref: 'ngrx.io',
+      },
+      routeConfig: {
+        path: ':id',
+        title: 'Static title',
       },
+      title: 'Static title',
       url: [
         {
           path: 'etyDDwAAQBAJ',
           parameters: {},
         },
       ],
-      outlet: 'primary',
-      routeConfig: {
-        path: ':id',
-      },
-      queryParams: {
-        ref: 'ngrx.io',
-      },
-      fragment: 'test-fragment',
-      children: [],
     });
   });
 
   it('exposes a selector for the fragment', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.fragment$)).resolves.toBe(
+    await expect(firstValueFrom(routerStore.fragment$)).resolves.toBe(
       'test-fragment'
     );
   });
 
   it('exposes a selector for query params', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.queryParams$)).resolves.toEqual({
+    await expect(firstValueFrom(routerStore.queryParams$)).resolves.toEqual({
       ref: 'ngrx.io',
     });
   });
 
   it('creates a selector for a specific query param', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.selectQueryParam('ref'))).resolves.toBe(
-      'ngrx.io'
-    );
+    await expect(
+      firstValueFrom(routerStore.selectQueryParam('ref'))
+    ).resolves.toBe('ngrx.io');
   });
 
   it('exposes a selector for route params', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.routeParams$)).resolves.toEqual({
+    await expect(firstValueFrom(routerStore.routeParams$)).resolves.toEqual({
       id: 'etyDDwAAQBAJ',
     });
   });
 
   it('creates a selector for a specific route param', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.selectRouteParam('id'))).resolves.toBe(
-      'etyDDwAAQBAJ'
-    );
+    await expect(
+      firstValueFrom(routerStore.selectRouteParam('id'))
+    ).resolves.toBe('etyDDwAAQBAJ');
   });
 
   it('exposes a selector for route data', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.routeData$)).resolves.toEqual({
+    await expect(firstValueFrom(routerStore.routeData$)).resolves.toEqual({
       testData: 'test-data',
     });
   });
 
   it('creates a selector for specific route data', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
     await expect(
-      firstValueFrom(store.selectRouteData<string>('testData'))
+      firstValueFrom(routerStore.selectRouteData<string>('testData'))
     ).resolves.toBe('test-data');
   });
 
   it('exposes a selector for the URL', async () => {
-    await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');
+    const { routerStore } = await setup();
 
-    await expect(firstValueFrom(store.url$)).resolves.toBe(
+    await expect(firstValueFrom(routerStore.url$)).resolves.toBe(
       '/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment'
     );
   });
+
+  it('exposes a selector for the route title that emits static route titles', async () => {
+    const { routerStore } = await setup({
+      title: 'Static title',
+    });
+
+    await expect(firstValueFrom(routerStore.title$)).resolves.toBe(
+      'Static title'
+    );
+  });
+
+  it('exposes a selector for the route title that emits resolved route titles', async () => {
+    const { routerStore } = await setup({
+      title: (route) => route.data['testData'],
+    });
+
+    await expect(firstValueFrom(routerStore.title$)).resolves.toBe('test-data');
+  });
 });

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

@@ -26,31 +26,37 @@ export class GlobalRouterStore
     (routerState) => routerState.root
   );
 
-  readonly currentRoute$: Observable<MinimalActivatedRouteSnapshot> =
-    this.select(this.#rootRoute$, (route) => {
+  currentRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
+    this.#rootRoute$,
+    (route) => {
       while (route.firstChild) {
         route = route.firstChild;
       }
 
       return route;
-    });
-  readonly fragment$: Observable<string | null> = this.select(
+    }
+  );
+  fragment$: Observable<string | null> = this.select(
     this.#rootRoute$,
     (route) => route.fragment
   );
-  readonly queryParams$: Observable<Params> = this.select(
+  queryParams$: Observable<Params> = this.select(
     this.#rootRoute$,
     (route) => route.queryParams
   );
-  readonly routeData$: Observable<Data> = this.select(
+  routeData$: Observable<Data> = this.select(
     this.currentRoute$,
     (route) => route.data
   );
-  readonly routeParams$: Observable<Params> = this.select(
+  routeParams$: Observable<Params> = this.select(
     this.currentRoute$,
     (route) => route.params
   );
-  readonly url$: Observable<string> = this.select(
+  title$: Observable<string | undefined> = this.select(
+    this.currentRoute$,
+    (route) => route.title
+  );
+  url$: Observable<string> = this.select(
     this.#routerState$,
     (routerState) => routerState.url
   );