Ad

Problem With Og Tags, When Using Angular6 And @ng-toolkit/universal

I am using @ng-toolkit/universal to have a server side render application on firebase.

When can successfully add or update og-tags directly in ngOnInit using: import { Meta } from '@angular/platform-browser';

Also everything is ok when I update og-tags in ngOnInit; When I subscribe a router event.

But i have problem when i want to update these og-tags with the firebase database values. My code is like this:

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

    });

}

Wen i deploy the app on firebase, there is no problem and the code works well, but it seems the second part of code serve in client side and not server side.

What is the problem? How can I fix it?

Ad

Answer

I found a solution for the problem.

To solve the problem:

1- There is no problem when I am using any promises in my code. 2- There is no problem when I am using angularfire-lite.

So there is 2 solution: 1- Using angularfire-lite

2- Using node.js code for server side version of app. I mean "server.js" or "server.ts" file.

I am using javascript for my "server" file. So I can add some node.js code to the server.js to update og-tags. To do that, First step is building serve.js. Then find where you want to add meta-tags. And then deploy. That's it. The result is something like this.

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" is a large and complicated file. It's hard to find where you should add your node.js code. One solution is to add your node.js as comment to the angular code. After building 'server.js', just find this comment and make it runnable. For example, My angular code comes below. And the final result is above code.

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

} }

Ad
source: stackoverflow.com
Ad