Angular路由默认是在客户端进行的,不会阻止服务器往返。但是,可以使用服务器端渲染(Server-Side Rendering,SSR)来实现在服务器上进行路由,并在客户端和服务器之间进行渲染。
以下是一个使用Angular Universal实现服务器端渲染的示例代码:
npm install --save @angular/platform-server @nguniversal/express-engine express
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
// 读取服务器端渲染的Angular应用模块
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
// 启用生产模式
enableProdMode();
// 创建Express应用
const app = express();
// 设置静态文件目录
app.use(express.static('./dist/browser', { index: false }));
// 处理所有路由请求
app.get('*', (req, res) => {
// 渲染Angular应用模块到HTML字符串
const html = readFileSync(join('dist/browser', 'index.html')).toString();
const { AppServerModule, AppModule } = AppServerModuleNgFactory;
renderModuleFactory(AppServerModule, {
document: html,
url: req.url,
extraProviders: [
// 提供Lazy加载模块的映射
{
provide: LAZY_MODULE_MAP,
useFactory: () => {
return {
// 添加你的Lazy加载模块
};
}
}
]
}).then(result => {
// 发送渲染后的HTML字符串
res.send(result);
});
});
// 启动服务器
app.listen(4000, () => {
console.log('Server is listening on port 4000');
});
ng build --prod && ng run [your-project-name]:server
node server.js
现在,Angular应用将在服务器上进行路由和渲染,而不是在客户端进行。
上一篇:Angular路由失败