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

Question

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

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

我生成了一个关于组件。我使用来自"@angular/平台浏览器"的标题给这个 AboutComponent 它自己的标题。

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

npm 运行构建：ssr

NPM运行服务：SSR

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

然后我使用

NG 添加 @angular/PWA

我再次运行 npm run build：ssr 和 npm run serve：ssr Chrome 开发工具中"关于"页面的"查看源代码"显示索引中的标题，而不是"关于组件"的特定标题。

有没有办法让通用保留每个页面的单独标题并有一个服务工作者？

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

为了以更好的方式进行验证，只需尝试在任何社交媒体网站(如FB)中分享您的页面链接(希望它是实时的)，您应该在那里的链接预览中看到标题。