Я использую Angular Universal и Nest JS для моего SSR. Когда я запускаю npm run build:ssr и развертываю его, я не получаю ошибок, но метатеги внутри обещаний не отображаются при связывании веб-сайта, но ссылки для маршрутов, для которых я установил метатеги на уровне root 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,
})
})
}
}
Кто я могу отображать контент, например, из firebase, в моих метатегах с Angular9 с Nest JS?
I создали фиктивный проект на GitHub, где я получаю эту ошибку. Чтобы воспроизвести, прикрепите проект firebase в файл среды и запустите npm run serve:ssr (возможно, npm run build:ssr, если вы получите сообщение об ошибке) и увидите в исходном коде в chrome, что метатеги не отображаются.
EDIT : Я попытался решить эту проблему с помощью метода resolve, но он по-прежнему не работает с обещаниями. Это сценарий разрешения, который я использую:
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Http } from '@angular/http';
@Injectable({
providedIn: 'root'
})
export class LoadSeoService implements Resolve<any> {
constructor (private http: Http, private db: AngularFirestore) {
}
resolve (route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot) {
// Works
return "test"
// Does not work
// return this.db.firestore.collection("articles").doc(route.params['id'].substr(route.params['id'].length - 20)).get();
}
}
Код, который я использую в своем компоненте:
this.route.data.subscribe(data => {
console.log(data.cres)
this.seo.generateTags({
title: data.cres,
description: data.cres,
image: data.cres,
})
});