Why are the angular wildcard routes resolving so slowly when rendering the app server side using express.js?

Issue

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 }] });
  });

Solution

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.

Answered By - darwin