首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在使用angular6和@ng-toolkit/universal时,og标记出现问题

在使用angular6和@ng-toolkit/universal时,og标记出现问题
EN

Stack Overflow用户
提问于 2019-03-01 08:55:46
回答 1查看 172关注 0票数 -1

我正在使用@ng-toolkit/universal让服务器端在firebase上呈现应用程序。

什么时候可以直接在ngOnInit中添加或更新og-tag:从‘@angular/platform-browser’导入{ Meta };

此外,当我在ngOnInit中更新og-tags时,一切正常;当我订阅路由器事件时。

但是当我想用firebase数据库的值来更新这些og-tag时,我遇到了问题。我的代码是这样的:

代码语言:javascript
复制
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上部署应用程序,没有问题,代码运行良好,但似乎代码的第二部分服务于客户端,而不是服务器端。

有什么问题吗?我怎么才能修复它?

EN

回答 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。然后找到你想要添加元标签的地方。然后部署。就这样。结果是这样的。

代码语言:javascript
复制
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代码如下所示。最后的结果就是上面的代码。

代码语言:javascript
复制
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');

}}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54936475

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档