Angular Universal: Adding a service worker doesn't allow specific titles for pages

Question

I have an Angular Universal app, by using this call on the CLI

ng add @nguniversal/express-engine --clientProject myapp

I generate an AboutComponent. And I give this AboutComponent it's own title using Title from '@angular/platform-browser'.

So this works! On the command line I use

npm run build:ssr

npm run serve:ssr

and then check the View Source in Chrome Dev Tools and see the different title for the about page.

Then I add a service worker using

ng add @angular/pwa

I run npm run build:ssr and npm run serve:ssr again and now the View Source in Chrome Dev Tools for the the about page shows the title from the index instead of the AboutComponent's specific title.

Is there some way to get Universal to keep the individual titles for each page and also have a service worker?

Here's my github: https://github.com/flocela/univ-servworker

Thank you.

EDIT: Here's my about.component.ts file:

import { Component, OnInit } from '@angular/core';
import {Title} from '@angular/platform-browser';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.sass']
})
export class AboutComponent implements OnInit {
  constructor(private title: Title) { }

  ngOnInit() {
    this.title.setTitle('About');
  }
}

did you try to set title of page on init event of every controller? — FarukT
@FarukT I set the title in the about.component.ts. That's my only component other than the app component. I've added the code to my question. — flobacca
Just want to confirm, did you try to unregister service worker and then register again? And see if it works? — Sumit Parakh
Depening on the point that service worker can be used to cache pages. So, service worker might be holding different data other than new one. And invalidating/unregistering it at once might show you updated result. Ofcourse, unregistration is not the right way of display updated data. But this way, we're actually trying to investigate the root cause of problem. — Sumit Parakh
Hi @SumitParakh. Do you mean unregistering the service worker using the Chrome Dev tools? When I unregister the service worker in the Chrome Dev tools, the 'About' title does show in the View Source. I don't see how to register the Service Worker again, other than loading the app again. — flobacca

Sumit Parakh Sumit Parakh · Accepted Answer · 2019-04-23T17:32:05

Since Service worker is already running on the browser so if you view "view-source" it will return the local cache index.html file instead of SSR. Basically your SSR works but u can't view it in browser bcz of PWA cache. Use "Post man" or curl command or any REST client to get the compiled SSR file. It should return expected view source.

To validate in better way, just try to share your page link (hope it is live) in any social media site like FB and you should see title in link preview over there.

Angular Universal: Adding a service worker doesn't allow specific titles for pages

1 Answers