fix(router): Ensure ActivatedRouteSnapshot#title has correct value (#…

…47481)

ActivatedRouteSnapshot data gets mutated in the resolve phase of the Router. The title is assigned as part of this.
As a result, the title must be a getter in order to pick up the value that was note available during the class creation.

fixes #47459

BREAKING CHANGE: The title property is now required on ActivatedRouteSnapshot

PR Close #47481

goldens/public-api/router/index.md

@@ -74,7 +74,7 @@ export class ActivatedRouteSnapshot {
     queryParams: Params;
     get root(): ActivatedRouteSnapshot;
     readonly routeConfig: Route | null;
-    readonly title?: string;
+    get title(): string | undefined;
     // (undocumented)
     toString(): string;
     url: UrlSegment[];

packages/router/src/router_state.ts

@@ -308,7 +308,11 @@ export class ActivatedRouteSnapshot {
   _queryParamMap!: ParamMap;
 
   /** The resolved route title */
-  readonly title?: string = this.data?.[RouteTitleKey];
+  get title(): string|undefined {
+    // Note: This _must_ be a getter because the data is mutated in the resolvers. Title will not be
+    // available at the time of class instantiation.
+    return this.data?.[RouteTitleKey];
+  }
 
   /** @internal */
   constructor(

packages/router/test/page_title_strategy_spec.ts

@@ -9,7 +9,7 @@
 import {DOCUMENT} from '@angular/common';
 import {Component, Inject, Injectable, NgModule} from '@angular/core';
 import {fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {Router, RouterModule, RouterStateSnapshot, TitleStrategy} from '@angular/router';
+import {NavigationEnd, Router, RouterModule, RouterStateSnapshot, TitleStrategy} from '@angular/router';
 
 import {provideRouterForTesting} from '../testing/src/provide_router_for_testing';
 
@@ -99,6 +99,18 @@ describe('title strategy', () => {
          tick();
          expect(document.title).toBe('resolved title');
        }));
+
+    it('can get the title from the ActivatedRouteSnapshot', async () => {
+      router.resetConfig([
+        {
+          path: 'home',
+          title: 'My Application',
+          component: BlankCmp,
+        },
+      ]);
+      await router.navigateByUrl('home');
+      expect(router.routerState.snapshot.root.firstChild!.title).toEqual('My Application');
+    });
   });
 
   describe('custom strategies', () => {