Angular Universal：添加服务工作者不允许页面的特定标题

Question

我在CLI上使用此调用有一个Angular Universal应用程序

添加@nguniversal / express-engine --clientProject myapp

我生成一个AboutComponent。我使用'@ angular / platform-b​​rowser'中的Title给这个AboutComponent它自己的标题。

这样可行！在我使用的命令行上

npm run build：ssr

npm run serve：ssr

然后检查Chrome开发者工具中的查看源，并查看关于页面的不同标题。

然后我使用添加服务工作者

添加@ angular / pwa

我运行npm run build：ssr和npm再次运行serve：ssr，现在Chrome开发工具中的查看源为about页面显示索引中的标题而不是AboutComponent的特定标题。

有没有办法让环球保持每个页面的个人标题，还有一个服务工作者？

这是我的github：https://github.com/flocela/univ-servworker

谢谢。

编辑：这是我的about.component.ts文件：

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

由于Service worker已在浏览器上运行，因此如果您查看“view-source”，它将返回本地缓存index.html文件而不是SSR。基本上你的SSR工作，但你无法在PWA缓存的浏览器bcz中查看它。使用“Post man”或curl命令或任何REST客户端来获取已编译的SSR文件。它应该返回预期的视图源。

要以更好的方式验证，只需尝试在任何社交媒体网站（如FB）中共享您的页面链接（希望它是实时的），您应该在链接预览中看到标题。