title: Angular Universal meta tags not being seen by Facebook
body: <p>I'm trying to get the relevant meta tags to show on my article pages for Facebook sharing. I'm using Angular Universal and it's Server-side rendering. Google Indexing works, and the meta tags appear in the page source, so I know SSR is working, However, the Facebook Crawler for reason can't see them. </p>
  
  <p>Solutions I've tried are using the <code>Meta</code> module from <code>@angular/platform-browser</code></p>
  
  <pre><code>import { Meta } from '@angular/platform-browser';
  
  this.meta.updateTag({ property: 'og:type', content: 'article' });
  this.meta.updateTag({ property: 'og:site_name', content: 'AdriaOffer' });
  this.meta.updateTag({ property: 'og:title', content: config.title });
  this.meta.updateTag({ property: 'og:description', content: config.description });
  this.meta.updateTag({ property: 'og:image', content: config.image });
  this.meta.updateTag({ property: 'og:url', content: config.slug });
  </code></pre>
  
  <p>I also found <code>ngx-meta</code> - <a href="https://github.com/fulls1z3/ngx-meta/" rel="nofollow noreferrer">https://github.com/fulls1z3/ngx-meta/</a></p>
  
  <p>Which worked if you added the meta data within the route, e.g (taken from their npm page)</p>
  
  <pre><code>...
  import { MetaGuard } from '@ngx-meta/core';
  ...
  export const routes: Routes = [
    {
      path: '',
      canActivateChild: [MetaGuard],
      children: [
        {
          path: 'home',
          component: HomeComponent,
          data: {
            meta: {
              title: 'Sweet home',
              description: 'Home, home sweet home... and what?'
            }
          }
        },
        {
          path: 'duck',
          component: DuckComponent,
          data: {
            meta: {
              title: 'Rubber duckie',
              description: 'Have you seen my rubber duckie?'
            }
          }
        },
        {
          path: 'toothpaste',
          component: ToothpasteComponent,
          data: {
            meta: {
              title: 'Toothpaste',
              override: true, // prevents appending/prepending the application name to the title attribute
              description: 'Eating toothpaste is considered to be too healthy!'
            }
          }
        }
      ]
    }
    ...
  ];
  </code></pre>
  
  <p>But this solution doesn't work for me, as I need the data to be added dynamically, which seems to be a known issue - <a href="https://github.com/fulls1z3/ngx-meta/issues/118" rel="nofollow noreferrer">https://github.com/fulls1z3/ngx-meta/issues/118</a>, or at least someone else has reported the same problem.</p>
  
  <p>I've spent far too long on this, and an interim hack solution would also be fine, thinking my <code>server.ts</code> (which was automatically generated) could be updated somehow? </p>
  
  <p>server.ts file for reference </p>
  
  <pre><code>import 'zone.js/dist/zone-node';
      import 'reflect-metadata';
      import {enableProdMode} from '@angular/core';
      import {ngExpressEngine} from '@nguniversal/express-engine';
      import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
  
      import * as express from 'express';
      import * as bodyParser from 'body-parser';
      import * as cors from 'cors';
      import * as compression from 'compression';
      import {join} from 'path';
  
      enableProdMode();
  
      export const app = express();
  
      app.use(compression());
      app.use(cors());
      app.use(bodyParser.json());
      app.use(bodyParser.urlencoded({ extended: true }));
  
      // const DIST_FOLDER = join(process.cwd(), 'dist');
  
      const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
  
      app.engine('html', ngExpressEngine({
        bootstrap: AppServerModuleNgFactory,
        providers: [
          provideModuleMap(LAZY_MODULE_MAP)
        ]
      }));
  
      app.set('view engine', 'html');
      app.set('views', './dist/browser');
  
      app.get('/redirect/**', (req, res) =&gt; {
        const location = req.url.substring(10);
        res.redirect(301, location);
      });
  
      app.route('/sitemap.xml')
      .get((req, res) =&gt; {
        const DIST_FOLDER = join(process.cwd(), 'dist');
        res.sendFile(join(DIST_FOLDER,'sitemap.xml'));
      });
  
  
      app.get('*.*', express.static('./dist/browser', {
        maxAge: '1y'
      }));
  
      app.get('/*', (req, res) =&gt; {
        res.render('index', {req, res}, (err, html) =&gt; {
          if (html) {
            res.send(html);
          } else {
            console.error(err);
            res.send(err);
          }
        });
      });
  </code></pre>