在現有的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服務來設置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文件提供了服務。