在现有的 Node.js 服务器上预渲染 Angular 应用程序

Question

我的目标是拥有动态的og: 标签，Facebook 爬虫可以看到这些标签。通过做一些研究，我认为最好的（可能也是唯一的）方法是在服务器上预渲染我的应用程序。但是我在这样做时遇到了问题。

我已经有一个现有的 Node.js 服务器，它看起来与大多数在线指南中的服务器略有不同。

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();

// Api for retrieving data from DB
const api = require('./server/api');

// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// Angular DIST folder
app.use(express.static(path.join(__dirname, 'dist')));

// Api location
app.use('/api', api);

// Send all other requests to the Angular app
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'))
})

// Set Port
const port = process.env.PORT || '3040';
app.set('port', port);

const server = http.createServer(app)

server.listen(port, () => console.log('Magic happens on localhost:' + port));

我尝试过使用 prerender.io。我得到了一个 API 密钥，安装了 prerender-node 并在将请求重定向到 index.html 之前把它放好：

app.use(require('prerender-node').set('prerenderToken', 'my-token'));
// Send all other requests to the Angular app
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'))
})

我还将它添加到我的 index.html 中： <meta name="fragment" content="!">

什么都没有改变。也许我还需要做其他事情才能让它工作？同样，我的目标是拥有动态的og: 标签，Facebook 爬虫可以看到这些标签。

附加信息：现在，如果重要的话，我正在使用 Angular 4 附带的 Meta 服务设置元标记。

编辑： 如果有人想测试，演示链接：http://aramet.demo.cdots.bg/news-preview/1

Answer 1

你能不能试着移动一下：

app.use(require('prerender-node').set('prerenderToken', 'my-token'));

在静态文件行上方，如：

app.use(require('prerender-node').set('prerenderToken', 'my-token'));
// Angular DIST folder
app.use(express.static(path.join(__dirname, 'dist')));

由于您的 index.html 文件位于 dist 文件夹中，并且您从 dist 文件夹中提供静态文件，我想知道静态调用是否以某种方式为您的 index.html 文件提供服务。