Angular9 SSR元标记未在promise中加载

Question

我将Angular Universal和NestJS用于我的SSR。当我运行npm run build:ssr并部署它时，我没有收到任何错误，但是在链接网站时，promise中的元标记未显示，但是在ngOnInit的根级设置元标记的路由链接会加载元标记链接网站时符合预期。

用于设置元标记的代码。

generateTags({ title = '', description = '', image = '' }) {

 this.title.setTitle(title);
 this.meta.addTags([
   // Open Graph
   { name: 'og:url', content: `https://firestarter.fireship.io${this.router.url}` },
   { name: 'og:title', content: title },
   { name: 'og:description', content: description },
   { name: 'og:image', content: image },
   // Twitter Card
   { name: 'twitter:card', content: 'summary' },
   { name: 'twitter:site', content: '@fireship_dev' },
 ]);
} 

未加载元标记的代码示例

this.db.firestore.collection('users').doc(this.customerId).get().then((userRef) => {
  this.seo.generateTags({
    title: userRef.data().displayName,
    description: userRef.data().about,
    image: userRef.data().photoURL,
  })
})

不加载元标记的代码示例

this.seo.generateTags({
  title: userRef.data().displayName,
  description: userRef.data().about,
  image: userRef.data().photoURL,
})

完整示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { SeoService } from 'src/app/services/seo.service';

@Component({
  selector: 'app-profileviewer',
  templateUrl: './profileviewer.component.html',
  styleUrls: ['./profileviewer.component.css']
})
export class ProfileviewerComponent implements OnInit {

  customerId: string;

  constructor(
    private route: ActivatedRoute,
    private db: AngularFirestore,
    private seo: SeoService) { }

  ngOnInit() {
    this.customerId = this.route.snapshot.paramMap.get('id');

    this.db.firestore.collection('users').doc(this.customerId).get().then((userRef) => {
      this.seo.generateTags({
        title: userRef.data().displayName,
        description: userRef.data().about,
        image: userRef.data().photoURL,
      })
    })
  }
}

谁可以在带有NestJS的Angular9的meta标签中显示例如firebase的内容？

我在GitHub上输入了dummy project，并收到此错误。要在环境文件中重现附加的Firebase项目并运行npm run serve:ssr（如果出现错误，则可能为npm run build:ssr），并在chrome的源代码中看到未呈现meta标签。

Answer 1

您对firestore的调用是异步的，因此SSR在承诺解决之前就完成了。所有异步功能都需要在路由器级别上解决，因此角度等待它们完成。

尝试将Firestore请求添加到路由解析器，并使用ngOnInit（）函数中来自解析器的数据。

在此处查看更多信息：https://angular.io/api/router/Resolve