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

时间:2018-12-28 15:26:58

标签: angular typescript express angular-routing angular-universal

我有一个带有Angular Universal设置(快速)的Angular 7应用程序。我也在使用角度路由。我正在尝试将其设置为仅在服务器端呈现我的登录前路线(市场视图)的位置,而登录后的任何内容都通过传统的角度客户端加载进行加载。

如果用户使用syntax EOS = ";" // handle ";" as end of statement | Epsilon $ // handle "\n" and EOF as end of statement | Epsilon >> "}" // it might be also necessary (from ANTLR grammar) ; syntax Epsilon = ; //and a test case test bool testParseEOS() { try { parse(#BlockStmt, "{x := x + 1; y := 10 \n y := z + 1; x := z }"); return true; } catch ParseError(loc l): { println("I found a parse error at line <l.begin.line>, column <l.begin.column>"); return false; } } router.navigate浏览站点,我就可以使用它,但是,如果用户单击浏览器刷新,它会由于浏览器对某些路线上的cookie和本地存储的依赖性而崩溃。

期望的结果是,如果用户直接导航或在SSR之外的路线上刷新,则其加载就好像没有Angular Universal一样。如果我指定的SSR路由导航到它,则会呈现服务器端。

在我的[routerLink]中,我有这条线,所有路线都使用通用。

server.ts

我尝试指定要使用通用路由,但是在其他所有路由上却得到404。我确定我只是要解决这个错误。

1 个答案:

答案 0 :(得分:0)

您可以使用明确的路由规则来做到这一点。

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