How to load a feature module (lazyloaded module) without SSR in Angular?

This answer is from eneajaho from reddit.

Hi, I ran into your use-case some months ago, and I "found" a solution, and also opened an issue in the angular repo, in order to add the solution in the docs, but no success. Anyway, here is the issue: https://github.com/angular/angular/issues/41187

The solution: You should edit the server.ts file where the routing on the server side happens, and add an array of routes that you want to not render on the server side. Example:

const EXCLUDED_ROUTES: string[] = [
  '/test',
  '/auth(/)?*',
  '/back(/)?*',
];

Then, you should add a get with the excluded routes in the file, before the one that the server renders the app. And this route would directly return the index.html file, so it won't render it, but it will serve it as a static file, just like client-side rendering.

server.get(EXCLUDED_ROUTES, (req, res) => {
  res.sendFile(join(distFolder, 'index.html'));
});

The whole code:

/**
 * EXCLUDED_ROUTES contains all the paths that we don't want to render on the server
 *  Examples:
 *    '/test'
 *    '/back(/)?*' // regex: string starts with /back, '/' is optional, '*' it can be anything
 */
const EXCLUDED_ROUTES: string[] = [
  '/test',
  '/auth(/)?*',
  '/back(/)?*',
];

/**
 * Is used to exclude the routes from rendering on the server. Ex. Auth Page, Admin Page
 * To add or remove excluded routes modify the EXCLUDED_ROUTES array
 */
server.get(EXCLUDED_ROUTES, (req, res) => {
  res.sendFile(join(distFolder, 'index.html'));
});