使用外部API调用更新angular Universal中的元标签

Question

我花了两个多月的时间，但找不到如何进行角度通用的清晰解决方案。我已经花了大约6个月的时间来在一个项目上实施angular Universal，而我却花了很多时间，但现在我仍然坚持这个问题。任何人都可以帮我这个忙，因为全世界似乎都想知道Angular SSR的解决方案。

这是我的代码（元标记服务）：

import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import {commonMetas} from './meta-data.model';

@Injectable()
export class SeoService {
    public commonMetas = commonMetas;
    constructor(public meta: Meta, public title: Title) {}

    setAutomatically (key = 'none') {
        const detail = this.commonMetas[key];
        /** setting defaults */
        this.setTitle(detail.title);
        this.setAuthor();
        this.setDescription(detail.description);
        this.setKeywords(detail.keyword);
    }
    setFromJson(key: {
        title: any,
        description: any,
        image: any,
        keyword: any,
        author: any
    }) {
        key.title = key.title ? key.title : this.commonMetas['none'].title;
        key.description = key.description ? key.description : this.commonMetas['none'].description;

    }
    setTitle(titleToSet = '') {
        this.title.setTitle(titleToSet);
    }
    setAuthor (nameToSet = '') {
        this.meta.addTag({ name: 'author',   content: 'havemybooks.com'});
    }
    setKeywords (keyword = '') {
        this.meta.addTag({ name: 'keywords', content: keyword});
    }
    }
}

还有我的component.ts

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
      this.api.getParticular({id: this.id}).subscribe((response) => {
        this.content = response.blog_data[0];
        this.content.main_image = this.getImage(this.content.main_image);
        this.content.metaCreatedAt = moment(this.content.created_at).format('YYYY-MM-DD');
        this.content.displayCreatedAt = moment.utc(new Date(this.content.created_at)).fromNow();
        this.content.name = this.handleName(this.content.name);
        this.seo.setFromJson({
          title: this.content.title,
          image: this.content.main_image,
          description: this.content.blog,
          author: this.content.name,
          keyword: ''
        });
      });
   });
  }

这是一些链接的StackOverflow问题和GitHub问题：

Angular通用服务器端渲染，Meta标签

使用角度通用更新SEO的元标记

Angular Universal +外部API

https://github.com/fulls1z3/ngx-meta/issues/101

Angular Universal-OG元标记不适用于子路由

https://github.com/fulls1z3/ngx-meta/issues/118（我试图从成功实施但没有帮助的人那里获得帮助）

https://github.com/maciejtreder/ng-toolkit/issues/460（我打开了它）

清单还在继续，我看到了许多从未结束的讨论。任何可以在ng-express中呈现之前建议如何进行API调用的人。

我已经实现了SSR，并使用ngx-meta标签，但fb搜寻器仍显示我在head标签中使用的默认元标签。

更新：我能够使用chrome中的查看源选项更新源，但是Facebook和Google搜寻器显示默认的默认元标记。启动我的网站非常困难，它会留下所有帮助。@Brandon指导了我很多时间，我花了很多时间在Jade和Nunchucks上实现节点，但是由于默认角度通用使用angular-express，所以我无法使用上述渲染引擎。

因此，有一种方法可以使用ng express引擎呈现元标记。

像这样 <title>{{meta.title}}</title>...

Answer 1

找不到简单的方法来做到这一点，但这里有一个 GitHub 用户提供的临时/hacky 解决方案，我直接引用他的答案：

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

在index.html中，创建模板值，如下所示：

    <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" />