Loading preferred routes in Angular 6+ Universal for faster performance

Question

Loading preferred routes in Angular 6+ Universal for faster performance

In my Angular 7 application, I have Angular Universal set up with Express and I am also utilizing Angular Routing. My goal is to have only the pre-login routes (marketing views) rendered server-side, while post-login routes are loaded using traditional client-side Angular loading.

Currently, I have successfully implemented this setup for routes navigated using router.navigate or [routerLink]. However, when a user refreshes the page in the browser, issues arise due to browser dependencies like cookies and local storage on certain routes.

The desired functionality is for routes excluded from server-side rendering to load as if Angular Universal is not present when directly navigated to or refreshed. Routes designated for server-side rendering should render on the server.

In my server.ts file, I have the following line that uses Angular Universal for all routes:

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

I have attempted to specify the routes I want to use Universal for, but this approach results in a 404 error for all other routes. I believe I may be approaching this issue incorrectly.

angular typescript express angular-routing angular-universal

Answer 1

Answer №1

If you want to achieve this functionality, you can utilize express routing rules to make it happen.

To implement this, you need to modify your middleware responsible for server-side rendering to verify the "allowed" ssr routes and then add a catch-all rule after it. Below is an example of what this might look like:

// Code for Server-Side Rendering catch call
app.get('*', (req, res, next) => {
    if (['/campaign', '/', '/any/other/page'].indexOf(req.originalUrl) < 0) {
        return next(); // move on to the next path match
    }
    renderModuleFactory(
       ... your existing SSR implementation
});

// Catch-all rule to serve the normal client-side rendered app
app.get('*', (req, res) => {
    return res.sendFile(path.join(APP_CONFIG.client_root, './index.html'));
});

Answer 2

If you want to achieve this functionality, you can utilize express routing rules to make it happen.

To implement this, you need to modify your middleware responsible for server-side rendering to verify the "allowed" ssr routes and then add a catch-all rule after it. Below is an example of what this might look like:

// Code for Server-Side Rendering catch call
app.get('*', (req, res, next) => {
    if (['/campaign', '/', '/any/other/page'].indexOf(req.originalUrl) < 0) {
        return next(); // move on to the next path match
    }
    renderModuleFactory(
       ... your existing SSR implementation
});

// Catch-all rule to serve the normal client-side rendered app
app.get('*', (req, res) => {
    return res.sendFile(path.join(APP_CONFIG.client_root, './index.html'));
});

Loading preferred routes in Angular 6+ Universal for faster performance

Answer №1

Similar questions

The absence of typings.json in Typescript is creating an issue

What is the best way to access a post request value from one JavaScript file to another in a Node.js environment

Encountering a 'blocked:other' error status while making a REST API call in my Angular application to retrieve data from the server

Using JSDoc with "T extending Component"

New post: "Exploring the latest features in Angular

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

An Unexpected ER_BAD_FIELD_ERROR in Loopback 4

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Utilizing custom types in React with TypeScript and Prop-Types

Merge rxjs streams, identify modifications, and yield a single result

Looking for solutions to resolve the "connect() failed (111: Connection refused)" error while attempting to restart a Node.js server?

Techniques for returning errors to the calling function using async functions

Using a REST API to make a POST request that calls a function and passes

Structuring Server Side Code with Node.js and Express

Streamline Jasmine-Node and express.js with automated processes

I am trying to figure out how to retrieve the name of the property that is bound to [(ngModel)] in Angular 6

Issue with rendering an object's property using EJS

What is the relevance of `type Constructor<T> = Function & { prototype: T }` in relation to Abstract constructor types in TypeScript?

Angular6 Observables used in API service with dynamic arguments

Tips for acquiring the newest router in an angular environment