Angular的水合(hydration)和预渲染可以一起工作。下面是一个使用Angular的预渲染和水合的代码示例:
npm install @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader @angular/platform-server
prerender.js
,用于定义预渲染的路由和输出目录:// prerender.js
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
const routes = [
'/',
'/about',
'/contact'
];
(async function() {
for (const route of routes) {
const html = await renderModuleFactory(AppServerModuleNgFactory, {
document: ' ',
url: route,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
});
// 将渲染好的HTML保存到预渲染目录
// 这里假设预渲染目录为 './dist/prerender'
const outputPath = `./dist/prerender${route}.html`;
fs.writeFileSync(outputPath, html.toString());
}
})();
server.ts
文件以启用预渲染:// server.ts
const express = require('express');
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const app = express();
// 预渲染目录
const staticDistPath = './dist/prerender';
// 静态资源目录
app.use(express.static(staticDistPath, {
index: false
}));
// Angular的Express引擎
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
// 使用Angular引擎渲染HTML
app.set('view engine', 'html');
app.set('views', staticDistPath);
// 所有路由都使用预渲染的HTML
app.get('*', (req, res) => {
res.render('index', { req });
});
// 启动服务器
app.listen(4000, () => {
console.log('Angular预渲染服务器已启动');
});
// package.json
{
"scripts": {
"build": "ng build --prod",
"prerender": "node prerender.js",
"start": "node server.js"
}
}
npm run prerender
运行后,预渲染器会根据 prerender.js
中定义的路由列表生成预渲染的HTML文件,并保存到指定的预渲染目录。
npm start
启动后,访问预渲染的路由时,服务器将直接返回预渲染的HTML文件,这样可以加快页面的加载速度。如果访问的是其他路由,服务器将使用Angular的引擎进行渲染。
请注意,以上示例中的代码仅供参考,具体的实现方式可能因项目而异。