'Angular Universal SSR with a virtual path

I've got an Angular 8 Universal server-side rendered app, with an Express server. On Production, the app has to be accessible via a virtual path "/app/partner". I've tried many things, but I'm still stuck. As a start, I've configured baseHref to be "/app/partner/". But I'm struggling with the Express configuration. The previous code was:

// Rest API endpoints, we're also hosting a Node API.
app.use('/api/v1', router);

// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

My goal is to not touch the output path, I want to use virtual paths.

So, I changed it to:

// Rest API endpoints, prepended virtual path
app.use('/app/partner/api/v1', router);

// static files, created virtual path
app.use('/app/partners', express.static(DIST_FOLDER, {
   maxAge: '1y'
}));

// Angular requests doesn't change
app.get('*', (req, res) => {
  res.render('index', { req });
});

So on paper this looks great. But it doesn't work entirely. When I spin up the node server locally, and go to http://localhost:4000/app/partner or http://localhost:4000/, it redirects to /app/partner/app/partner. The app loads fine though and I can also refresh.

It looks to me that Angular still receives the rewritten URL (i.e. just / instead of /app/partner) and decides to append it to the URL.

I've also double checked that the base href starts and ends with a / as I've seen other posts that mentioned that requirement.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source