在使用angular6和@ng-toolkit/universal时，og标记出现问题
我正在使用@ng-toolkit/universal让服务器端在firebase上呈现应用程序。
什么时候可以直接在ngOnInit中添加或更新og-tag:从‘@angular/platform-browser’导入{ Meta }；
此外，当我在ngOnInit中更新og-tags时，一切正常；当我订阅路由器事件时。
但是当我想用firebase数据库的值来更新这些og-tag时，我遇到了问题。我的代码是这样的：
ngOnInit(){
/* This part works:
1- I see 'the first step' string in the server console.
2- The og:type update works and og-tag debuger can find it.
*/
console.log('The first step');
this.meta.updateTag({ property: 'og:type', content: 'og:type.for.test' });
firebase.database().ref('test/ssr').on('value', function (snapshot) {
/* This part dose not work:
1- I can't see 'the first step' string in the server console.
But I can find this string in client side console.
2- og-tag debuger can not find 'og:title'. But I can find it updated in my browser.
*/
console.log('The Secound Step. No Working');
this.meta.updateTag({ property: 'og:title', content: 'og:title.for.test' });
});
}如果我在firebase上部署应用程序，没有问题，代码运行良好，但似乎代码的第二部分服务于客户端，而不是服务器端。
有什么问题吗？我怎么才能修复它？
回答 1
Stack Overflow用户
发布于 2019-03-04 04:01:08
我找到了解决这个问题的办法。
要解决问题，请执行以下操作：
1-当我在我的代码中使用任何promises时都没有问题。2-当我使用angularfire-lite时没有问题。
因此有两个解决方案: 1-使用angularfire-lite
2-将node.js代码用于服务器端版本的应用程序。我的意思是"server.js“或"server.ts”文件。
我正在为我的“服务器”文件使用javascript。因此，我可以向server.js添加一些node.js代码来更新og-tags。要做到这一点，第一步是构建serve.js。然后找到你想要添加元标签的地方。然后部署。就这样。结果是这样的。
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.database();
/*<<-Just for ssr*/
var SeoServiceService = /** @class */ (function () {
function SeoServiceService(titleService, meta, router) {
this.titleService = titleService;
this.meta = meta;
this.router = router;
}
SeoServiceService.prototype.generateTags = function (config) {
console.log('Client Side');
/*Just for ssr->>*/
return db.ref('test/ssr').on('value',(snapshot)=>{
console.log('Server Side');
this.meta.updateTag({ property: 'og:title', content: 'It works :)' });
return true
});
/*Just for ssr->>*/
console.log('Client Side');
};
SeoServiceService.ngInjectableDef = i0.defineInjectable({ factory: function SeoServiceService_Factory() { return new SeoServiceService(i0.inject(i1.Title), i0.inject(i1.Meta), i0.inject(i2.Router)); }, token: SeoServiceService, providedIn: "root" });
return SeoServiceService;
}());"Server.js“是一个大而复杂的文件。很难找到应该将node.js代码添加到哪里。一种解决方案是将node.js作为注释添加到angular代码中。在构建“server.js”之后，只需找到此注释并使其可运行即可。例如，我的angular代码如下所示。最后的结果就是上面的代码。
import { Injectable } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { Router } from '@angular/router';
/*Just for ssr->>*/
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.database();
/*<<-Just for ssr*/
@Injectable({
providedIn: 'root'
})
export class SeoServiceService {
constructor(
private titleService: Title,
private meta: Meta,
private router: Router,
) { }
generateTags(config) {
console.log('Client Side');
/*Just for ssr->>
return db.ref('test/ssr').on('value',(snapshot)=>{
console.log('Server Side');
this.meta.updateTag({ property: 'og:title', content: 'It works :)' });
return true
});
Just for ssr->>*/
console.log('Client Side');}}
https://stackoverflow.com/questions/54936475
复制相似问题
腾讯云开发者
