我有一个带有 Angular Universal setup(express) 的 Angular 7 应用程序。我也在使用 Angular 路由。我正在尝试将其设置为仅在服务器端呈现我的登录前路由(营销 View ),而登录后的任何内容都通过传统的 Angular 客户端加载进行加载。
如果用户使用 router.navigate
或 [routerLink]
导航站点,我可以使用它,但是如果用户单击浏览器刷新,它会因为浏览器而爆炸cookie 和本地存储在某些路由上的依赖性。
期望的结果是,如果用户直接导航或刷新排除在 SSR 之外的路线,它会加载,就好像 Angular Universal 不存在一样。如果导航到我指定 SSR 的路由,它会呈现服务器端。
在我的 server.ts
中,我有这一行,它对所有路由使用 Universal。
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
我尝试指定要使用通用的路由,但随后我在所有其他路由上都收到了 404。我确定我做错了。
最佳答案
您可以使用快速路由规则来做到这一点。
更改执行服务器端渲染的中间件以检查“允许的”ssr 路由,然后在其后添加一个包罗万象的路由。可能看起来像这样
// Server-Side Rendering catch call
app.get('*', (req, res, next) => {
if (['/campaign', '/', '/any/other/page'].indexOf(req.originalUrl) < 0) {
return next(); // continue path matching
}
renderModuleFactory(
... your existing SSR implementation
});
// Catch-all to return normal client-side rendered app
app.get('*', (req, res) => {
return res.sendFile(path.join(APP_CONFIG.client_root, './index.html'));
});
关于Angular 6+ Universal 仅预加载特定路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53960727/