Angular Universal：添加 service worker 不允许页面的特定标题

Question

我有一个 Angular 通用应用程序，通过在 CLI 上使用此调用

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

我生成了一个 AboutComponent。我使用“@angular/platform-browser”中的标题给这个 AboutComponent 赋予它自己的标题。

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

npm run build:ssr

npm run serve:ssr

然后检查 Chrome Dev Tools 中的查看源代码并查看关于页面的不同标题。

然后我使用

添加一个 service worker

ng add @angular/pwa

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

有没有什么方法可以让 Universal 保留每个页面的单独标题，并且还有一个 service worker？

这是我的 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" 它将 return 本地缓存 index.html 文件而不是 SSR。基本上你的 SSR 可以工作，但你无法在 PWA 缓存的浏览器 bcz 中查看它。使用 "Post man" 或 curl 命令或任何 REST 客户端获取编译后的 SSR 文件。它应该 return 预期查看源代码。

为了以更好的方式验证，只需尝试在 FB 等任何社交媒体网站上分享您的页面 link（希望它是实时的），您应该会在 link 预览中看到标题。

Angular Universal：添加 service worker 不允许页面的特定标题

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

angular-universal

angular

angular-service-worker