例如,在routes.ts中添加以下路由:
{
path: 'about',
component: AboutComponent,
data: { prerender: true }
},
{
path: 'contact',
component: ContactComponent
},
这将表示只有关于路由会被预渲染,而联系路由将不会被预渲染。
例如,在server.ts中添加以下代码:
const ROUTES = [
...
];
app.get('*', (req, res) => {
const now = Date.now();
res.setHeader('Cache-Control', 'public, max-age=86400'); // cache page for 24 hours
const found = ROUTES.some(route => {
const url = req.originalUrl.split('?')[0];
if (route.path === url && route.data && route.data.prerender) {
render(url, {
req: req,
res: res,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
});
return true;
}
});
if (!found) {
res.render('index', {
req: req,
res: res,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
});
}
});
function render(url: string, renderOptions: RenderOptions) {
...
}
这将仅预渲染具有data属性且设置为true的路由。其他路由将渲染为普通Angular应用程序。