dynamically added meta tags does not recognize facebook

I’m submitting a … (check one with “x”)

[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->

Current behavior

Expected/desired behavior

Minimal reproduction of the problem with instructions

import { MetaService } from '@ngx-meta/core';
import { FirstService } from './first.service';

export class FirstComponent {
      firstObj : any = {};

     constructor(private _metaService: MetaService,
                        private _firstService: FirstService) {}
      
     ngOnInit() {
             this._firstService.getQuestionOfTheWeek(0).subscribe(
                  res => firstObj = res,
                  error => this.errorGetRequest(error),
                  () => this.successGetRequest()
              );
       }

    successGetRequest(){
            this._metaService.setTag('og:description', this.firstObj .Desc);
            this._metaService.setTag('og:image', this.firstObj .ImageURL);
     }

}

What is the motivation / use case for changing the behavior?

Meta tag are getting added it is visible in the chrome developer tool but facebook does not recognize.

Environment

• Angular version: 4.0.0

• Browser:

• Chrome (desktop) version XX
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

• For Tooling issues:

• Node version: XX <!-- run node --version -->
• Platform:

• Others:

[bharath-holla]

@ishan123456789 @thecoconutstudio Somehow the emails got filtered out and I never observed these comments from both of you.

The below code is of course the most horrible hack, but it worked for me when no other solution on net was working. Till Angular team provides a fix, we decided to go with this.

Here’s my partial code.

//all imports
enableProdMode();

export const app = express();

const mysql = require('mysql');
const httpRequest = require("request");
// all other consts

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));
//all other piece of code in server.ts

app.get('/*', (req, res) => {
  res.render('index', {req, res}, (err, html) => {
    if (html) {
        
        //console.log(html);
        // This is where you get hold of HTML which "is about to be rendered"
    
        // after some conditional checks make a HTTP call
        let url = 'http://....';
        httpRequest.get(url, (error, response, body) => {
                        if(error) {
                            return console.log(error);
                        }
                        const respBody = JSON.parse(body);
                        if(respBody){
                              html = html.replace(/\$TITLE/g, respBody.title);
                              html = html.replace(/\$DESCRIPTION/g, respBody.description);
                              html = html.replace(/\$OG_META_KEYWORDS/g, respBody.metaKeywords);
                              html = html.replace(/\$OG_META_DESCRIPTION/g, respBody.metaDescription);
                              html = html.replace(/\$OG_DESCRIPTION/g, respBody.ogDescription);
                              html = html.replace(/\$OG_TITLE/g, respBody.ogTitle);
                              html = html.replace(/\$OG_IMAGE/g, respBody.img);
                              html = html.replace(/\$OG_SITE/g, respBody.ogSite);
                        }
                        res.send(html);
            });
     }
  }
}

And in index.html, create template values as below:

     
    <title>$TITLE</title>

    <meta name="description" content="$DESCRIPTION"/> 
    <meta name="keywords" content="$OG_META_KEYWORDS" />
    <meta name="metaDescription" content="$OG_META_DESCRIPTION"/> 
    <meta name="metaKeywords" content="$OG_META_KEYWORDS" />
    <meta property="og:title" content="$OG_TITLE" />
    <meta property="og:description" content="$OG_DESCRIPTION" />
    <meta property="og:site_name" content="$OG_SITE" /> 
    <meta property="og:type" content="website" />	
    <meta property="og:image" content="$OG_IMAGE" />

[mistrynilesh]

@gianpaj I used server side rendering page but still not working. When I am doing view source on browser developer tool than meta tags are available. facebook Sharing Debugger doesn’t shows OG tags.