@angular/router: ActivatedRoute.snapshot.title is always undefined

This issue has been tracked since 2022-09-16.

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

When the title is added as follows:

{
  path: '',
  component: HelloComponent,
  title: 'HELLO',
}

and we try to access it via route.snapshot.title:

export class HelloComponent implements OnInit {
 constructor(private readonly route: ActivatedRoute) {}

 ngOnInit(): void {
   console.log(this.route.snapshot.title); // undefined
 }
}

it will be undefined. However, we can still get the route title from route.snapshot.data:

const routeTitleKey = Object
  .getOwnPropertySymbols(this.route.snapshot.data)
  .find((symbol) => symbol.toString() === 'Symbol(RouteTitle)');

console.log(this.route.snapshot.data[routeTitleKey]); // HELLO

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-hqjky1?file=src%2Fapp%2Fhello.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular 14.2.2

Anything else?

No response

atscott wrote this answer on 2022-09-21

Confirmed. This isn't working because the title is treated as resolved data, which is mutated on the snapshot and not available at the time of class creation. Fixing this will technically be a breaking change (since there's no way to have an optional getter function) so it won't be available until v15. In the meantime, you can use the Observable title on ActivatedRoute to get the correct value.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84091
Watcher Count 3064
Fork Count 22233
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date