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

Question

我有一个 Angular Universal 应用，通过在 CLI 上使用这个调用

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

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

所以这行得通！在我使用的命令行上

npm run build:ssr

npm run serve:ssr

然后检查 Chrome Dev Tools 中的 View Source 并查看 about 页面的不同标题。

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

ng 添加@angular/pwa

我现在再次运行 npm run build:ssr 和 npm run serve:ssr 关于页面的 Chrome 开发工具中的 View Source 显示索引中的标题，而不是 AboutComponent 的特定标题。

有没有办法让 Universal 保留每个页面的单独标题并拥有一个服务人员？

这是我的 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）中分享您的页面链接（希望它是实时的），您应该会在链接预览中看到标题。