Question

我正在使用@ ng-toolkit / universal在Firebase上安装服务器端渲染应用程序。

何时可以使用以下命令直接在ngOnInit中成功添加或更新og标签：从'@ angular / platform-browser'导入{Meta};

当我在ngOnInit中更新og-tag时，一切都还好；当我订阅路由器事件时。

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

出什么问题了？我该如何解决？

Answer 1

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

要解决此问题：

1-当我在代码中使用任何promise时，没有问题。 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作为注释添加到角度代码中。构建完“ 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');

} }

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

1 个答案: