使用 angular6 和 @ng-toolkit/universal 时 og 标签的问题

Question

我正在使用@ng-toolkit/universal 在 firebase 上创建服务器端渲染应用程序。

何时可以使用以下方法直接在 ngOnInit 中成功添加或更新 og-tags：从“@angular/platform-browser”导入{元}；

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

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

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

问题是什么？我该如何解决？

Answer 1

我找到了问题的解决方案。

解决问题：

1- 当我在我的代码中使用任何承诺时没有问题。 2- 当我使用 angularfire-lite.

时没有问题

所以有2个解决方案： 1- 使用 angularfire-lite

2- 使用 node.js 代码用于服务器端版本的应用程序。我的意思是 "server.js" 或 "server.ts" 文件。

我正在为我的 "server" 文件使用 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');

} }

使用 angular6 和 @ng-toolkit/universal 时 og 标签的问题

Problem with og Tags, when using angular6 and @ng-toolkit/universal

universal

facebook-opengraph

firebase

server-side-rendering

angular