typescript - Angular 6+ Universal förladdar endast specifika rutter

Jag har en Angular 7-applikation med Angular Universal-inställning (express). Jag använder också Angular Routing. Jag försöker ställa in det så att endast mina för-inloggningsrutter (marknadsföringsvyer) renderas på serversidan och allt efter inloggning laddas genom traditionell Angular-klientsidansladdning.

Jag har det fungerande om användaren navigerar på webbplatsen med router.navigate eller [routerLink], men om användaren klickar på webbläsarens uppdateringsknapp kraschar det på grund av webbläsarberoenden för cookies och lokal lagring på vissa rutter.

Det önskade resultatet är att om en användare navigerar direkt eller uppdaterar på en rutt som är utesluten från SSR, laddas den som om Angular Universal inte finns. Om en rutt som jag anser är SSR navigeras till, renderas den på serversidan.

i min server.ts har jag denna rad som använder Universal för alla rutter.

app.get('*', (req, res) => { res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req }); });

Jag försökte specificera vilka rutter jag vill använda universellt, men då får jag en 404 på alla andra. Jag är säker på att jag bara gör fel.

Svar #1

Du kan göra detta med expressroutningsregler.

Ändra din middleware som gör server-side rendering för att kontrollera de "tillåtna" SSR-rutter, och lägg sedan till en catch-all efter det. Kan se ut ungefär så här

// 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'));
});