在Angular应用程序中安装@nguniversal/express-engine和@nguniversal/module-map-ngfactory-loader依赖项。
创建服务器端文件server.ts,导入必要的Angular模块和依赖项,配置服务器,如下所示:
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import * as express from 'express';
import { join } from 'path';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './main.server';
enableProdMode();
const app = express();
const PORT = process.env.PORT || 4000;
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', join(DIST_FOLDER, 'browser'));
app.use(express.static(join(DIST_FOLDER, 'browser'), {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
执行命令npm run build:ssr来编译应用程序并生成服务器端构建。
启动服务器,运行命令node server.js。
现在可以使用Node.js的调试器来调试服务器端代码并获取捕获堆栈跟踪,如下所示:
# 使用 --inspect 标志运行Node服务器
node --inspect server.js
在Chrome浏览器中打开chrome://inspect页面,并单击“Open dedicated DevTools for Node”链接。
在DevTools中,选择“Sources”选项卡,并加载服务器端文件。
使用“Sources”选项卡中的调试工具进行调试,并在控制台中获取捕获的堆栈跟踪信息。