Question

通过在CLI上使用此调用，我有了Angular Universal应用

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

我生成一个AboutComponent。然后，我使用'@ angular / platform-browser'中的Title来为AboutComponent赋予它自己的标题。

这可行！在命令行上，我使用

npm运行build：ssr

npm run serve：ssr

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

然后我使用

添加服务人员

ng添加@ angular / pwa

我一次又一次运行npm run build：ssr和npm run serve：ssr 关于页面的Chrome Dev Tools中的“查看源代码”显示索引中的标题，而不是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中查看它。使用“邮递员”或curl命令或任何REST客户端来获取已编译的SSR文件。它应该返回预期的视图源。

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

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

1 个答案: