Angular Universal 5 Meta Service无法正常工作求助

嘿，我碰到过类似的Angular Universal Meta标签不更新的问题，给你几个排查方向和解决办法：

• 必须用Angular的Meta服务操作标签，禁止直接操作DOM
  服务端渲染环境里没有浏览器的document对象，如果你用document.querySelector去修改meta标签，这段代码在服务端会直接被忽略，导致爬虫抓取的始终是index.html里的默认值。正确的姿势是用Angular官方的Meta服务来更新，比如：

  import { Meta } from '@angular/platform-browser';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-your-page',
    templateUrl: './your-page.component.html'
  })
  export class YourPageComponent implements OnInit {
    constructor(private meta: Meta) {}
  
    ngOnInit() {
      // 更新Open Graph标签
      this.meta.updateTag({ property: 'og:title', content: '自定义页面标题' });
      this.meta.updateTag({ property: 'og:description', content: '自定义页面描述' });
      // 更新Twitter Card标签
      this.meta.updateTag({ name: 'twitter:title', content: '自定义Twitter标题' });
      this.meta.updateTag({ name: 'twitter:description', content: '自定义Twitter描述' });
    }
  }
  

• 确保更新逻辑在服务端能执行到
  不要把Meta标签的更新逻辑包裹在isPlatformBrowser判断里，否则服务端渲染时根本不会执行这段代码，自然不会更新标签。另外，Angular Universal会在服务端执行ngOnInit钩子，所以把更新逻辑放在ngOnInit里是最稳妥的（不要放在构造函数里，构造函数不适合做这种初始化操作）。

• 检查服务端渲染的输出内容
  用curl命令直接请求你的页面，比如curl http://localhost:4000/your-page，看看返回的HTML代码里meta标签是不是已经更新了：

  • 如果curl返回的是更新后的标签，那问题可能出在浏览器缓存或者社交平台的爬虫缓存，你可以用对应社交平台的官方调试工具来强制刷新它们的缓存
  • 如果curl返回的还是默认值，那说明你的更新逻辑在服务端没执行，要检查是不是依赖了客户端特有的API，或者有没有在模块里正确注入Meta服务。

• 排查Angular Universal配置
  确保你的server.ts里正确配置了Angular的服务端模块，没有遗漏Meta服务的提供者。Angular 5的Universal默认会包含Meta服务的，但如果自定义了providers，要确保没有覆盖或者禁用它。

• 清除缓存并重启服务
  Angular Universal有时候会缓存渲染结果，你可以重启服务端进程，同时清除浏览器的缓存，再测试看看标签是否正常更新。

内容的提问来源于stack exchange，提问作者beachCode