Angular 6+ Universal 仅预加载特定路由

Question

我有一个带有 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。我确定我做错了。

Answer 1

您可以使用快速路由规则来做到这一点。

更改执行服务器端渲染的中间件以检查“允许的”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'));
});