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

Question

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

何时可以使用以下方法直接在 ngOnInit 中成功添加或更新 og-tags： 从'@angular/platform-b​​rowser'导入{ Meta }；

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

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

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- 在我的代码中使用任何 Promise 时都没有问题。 2-我使用angularfire-lite时没有问题。

所以有2个解决方案： 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 添加为角度代码的注释。构建“server.js”后，只需找到此注释并使其可运行。 例如，我的角度代码如下。最终结果如上代码。

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');

} }