作者:robable004_96978 | 来源:互联网 | 2022-12-02 14:54
我花了两个多月的时间,但找不到如何进行角度通用的清晰解决方案。我已经花了大约6个月的时间来在一个项目上实施angular Universal,而我却花了很多时间,但现在我仍然坚持这个问题。任何人都可以帮我这个忙,因为全世界似乎都想知道Angular SSR的解决方案。
这是我的代码(元标记服务):
import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import {commonMetas} from './meta-data.model';
@Injectable()
export class SeoService {
public commOnMetas= commonMetas;
constructor(public meta: Meta, public title: Title) {}
setAutomatically (key = 'none') {
const detail = this.commonMetas[key];
/** setting defaults */
this.setTitle(detail.title);
this.setAuthor();
this.setDescription(detail.description);
this.setKeywords(detail.keyword);
}
setFromJson(key: {
title: any,
description: any,
image: any,
keyword: any,
author: any
}) {
key.title = key.title ? key.title : this.commonMetas['none'].title;
key.description = key.description ? key.description : this.commonMetas['none'].description;
}
setTitle(titleToSet = '') {
this.title.setTitle(titleToSet);
}
setAuthor (nameToSet = '') {
this.meta.addTag({ name: 'author', content: 'havemybooks.com'});
}
setKeywords (keyword = '') {
this.meta.addTag({ name: 'keywords', content: keyword});
}
}
}
还有我的component.ts
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id'];
this.api.getParticular({id: this.id}).subscribe((response) => {
this.cOntent= response.blog_data[0];
this.content.main_image = this.getImage(this.content.main_image);
this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
this.content.name = this.handleName(this.content.name);
this.seo.setFromJson({
title: this.content.title,
image: this.content.main_image,
description: this.content.blog,
author: this.content.name,
keyword: ''
});
});
});
}
这是一些链接的StackOverflow问题和GitHub问题:
Angular通用服务器端渲染,Meta标签
使用角度通用更新SEO的元标记
Angular Universal +外部API
https://github.com/fulls1z3/ngx-meta/issues/101
Angular Universal-OG元标记不适用于子路由
https://github.com/fulls1z3/ngx-meta/issues/118(我试图从成功实施但没有帮助的人那里获得帮助)
https://github.com/maciejtreder/ng-toolkit/issues/460(我打开了它)
清单还在继续,我看到了许多从未结束的讨论。任何可以在ng-express中呈现之前建议如何进行API调用的人。
我已经实现了SSR,并使用ngx-meta标签,但fb搜寻器仍显示我在head标签中使用的默认元标签。
更新:我能够使用chrome中的查看源选项更新源,但是Facebook和Google搜寻器显示默认的默认元标记。启动我的网站非常困难,它会留下所有帮助。@Brandon指导了我很多时间,我花了很多时间在Jade和Nunchucks上实现节点,但是由于默认角度通用使用angular-express,所以我无法使用上述渲染引擎。
因此,有一种方法可以使用ng express引擎呈现元标记。
像这样 ...