I have an angular app where the last routes in the routing table are as follows:

{ path: "not-found", redirectTo: "404" },
{ path: "404", component: NotFoundComponent },
{ path: "**", redirectTo: "404" }

If I attempt to access a non-existing route, I end up on 404 as expected. However, this takes up to 20 seconds when rendering the app on an express.js server. Why? I enabled router tracing, but absolutely nothing happens for about 19 seconds and then suddenly, the route resolves as expected...

The express server is setup to render all routes using the angular router:

server.get("*", (req, res) => {
    return res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

CodePudding user response：

It sounds like the server is churning trying to use the wildcard inappropriately.

In case you hadn't looked into it, here are some troubleshooting tips that might resolve the problem.

1. Is there an issue with the server configuration for handling this type of request?
2. Is the server slow on all requests or just the redirects?
3. Using the same steps, but not the express server, does it take 20 seconds using your local angular server when running ng serve?

4. In Express 4.x, the * character in regular expressions is not interpreted in the usual way. As a workaround, use {0,} instead of *. This will likely be fixed in Express 5.

On point 4, see Express routing

CodePudding user response：

I figured this one out. It is actually an Angular Material component MatSnackBar that drastically slowed down the SSR of my NotFoundComponent for some reason. I have not been able to find out why but when disabling the call to MatSnackBar, the page renders instantly on the node express server.