Chrome not updating title

Question

In an Angular 10 application, I am dynamically setting titles, and in one instance Chrome won't update the text in the tab, but updates document.title property just fine. Inspecting page source and the <title></title> tag confirms this as well.

This works in other cases in application, and the case in question works fine in browsers with a different engine (Mozilla Firefox and the old Edge). I tested it in Opera and, of course, it doesn't work since the engine is the same.

The code is pretty much straightforward:

title: string; // arrives from Observable<>

constructor(public router: Router, private titleService: Title) {
    this.subscriptions.push(router.events.subscribe(() => {                     
        if (this.title)
            this.titleService.setTitle(this.title);
    }));
}

I've tried setting it directly to document.title and also doing both approaches in setTimeout with delays form 0.2 to 2 seconds (I've seen that hack somewhere, not that I'm into hacky solutions), with same results.

Any ideas?

Answer 1

This is an old post but I also had this problem recently. It is not a caching issue. I don't understand why it doesnt update, but you can use the routermodule to overwrite the pagetitle:

export const routes: Routes = {
    {path: 'url', component: Component, title: 'title'},
     ..
    }

If you like to change the image with it, set another thumbnail image in favicon.ico