Проблема с тегами og при использовании angular6 и @ ng-toolkit / universal - PullRequest
Новая
       29

Проблема с тегами og при использовании angular6 и @ ng-toolkit / universal

0 голосов
/ 01 марта 2019

Я использую @ ng-toolkit / universal, чтобы приложение для рендеринга на стороне сервера работало на firebase.

Когда можно успешно добавлять или обновлять og-теги непосредственно в ngOnInit, используя: import {Meta} from '@angular/ platform-browser ';

Также все в порядке, когда я обновляю теги og в ngOnInit;Когда я подписываюсь на событие маршрутизатора.

Но у меня возникает проблема, когда я хочу обновить эти теги og со значениями базы данных firebase.Мой код выглядит так: 

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 Ответ

0 голосов
/ 03 марта 2019

Я нашел решение для проблемы.

Чтобы решить проблему:

1 - Нет проблем, когда я использую какие-либо обещания в своем коде.2- Нет проблем, когда я использую angularfire-lite.

Так что есть 2 решения: 1- Использование angularfire-lite

2- Использование кода node.js для серверной версииприложение.Я имею в виду файл "server.js" или "server.ts".

Я использую javascript для своего файла "server".Поэтому я могу добавить код node.js в server.js для обновления тегов og.Для этого первым шагом является создание 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');

}}

...