node.js - 使用 Node.js 进行 Angular 4 服务器端渲染(ReferenceError : document is not defined))

Question

我按照教程here进行操作实现服务器端渲染 Angular 4 应用程序。但是，我不知道如何解决 Node.js 中与“文档未定义”相关的问题。我知道 Node.js 没有 DOM，因为它不是“浏览器”。但是，我真的需要在服务器中渲染应用程序以进行搜索引擎优化，但我不知道如何解决这些问题。我无法更改代码，因为它是第三方代码，嗯...有什么建议吗？

/var/www/nodejs/example.com/node_modules/custom-event/index.js:24
'function' === typeof document.createEvent ? function CustomEvent (type, params) {
                  ^
ReferenceError: document is not defined at Object.<anonymous> (/var/www/nodejs/example.com/node_modules/custom-event/index.js:24:23)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/www/nodejs/example.com/node_modules/crossvent/src/crossvent.js:3:19)
    at Module._compile (module.js:569:30)

我搜索了很多与“文档未定义”相关的帖子，大多数都只是解释node.js没有DOM，但没有提供任何解决方案。

如果您需要我的server.ts，那么这就是它。

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
    const opts = { document: template, url: options.req.url };
    renderModuleFactory(AppServerModuleNgFactory, opts)
        .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
    res.render('index', { req });
});

app.listen(PORT, () => {
    console.log(`listening on http://localhost:${PORT}!`);
});

提前致谢。

Answer 1

NodeJs 不支持窗口、文档、导航器 类型。因此，解决方案是将文件夹复制到另一个目录，例如在 src/server-mocks/ 中，并用 index.js 文件中的 global 替换所有 document 类型，并通过添加以下代码来配置 webpack.server.config.js。

const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');

 new NormalModuleReplacementPlugin(
      /crossvent(\\|\/)src(\\|\/)crossvent.js/,
      path.join(__dirname, 'src/server-mocks/crossvent/src/crossvent.js')    
    ),