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');
  }
}

Answer 1

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.