Angular: How to set baseHref for assets in development when using SSR

Issue

In production we are setting the base href with:

ng build --base-href /app/

This works well. Especially our assets are also served at /app/assets/ as expected.

I cannot achieve the same effect in development however, where we run:

ng run project:serve-ssr

Assets remain at /assets and are not accessible at /app/assets.

Things I have tried in angular.json

• setting architect.build.options.baseHref
• setting architect.serve.options.servePath
• setting architect.server.options.servePath (not allowed)
• setting architect.serve-ssr.options.servePath (not allowed)

I have also tried to set the DI token APP_BASE_HREF and provide it in the AppModue, but to no effect.

Solution

I ended up, rewriting the url in the express server in development. Not super happy with that though, so if anybody has a better answer, I will happily accept that.

In server.ts:

if (environment.removeAssetsPrefix.length) {
  server.use((req, _, next) => {
    if (req.url.startsWith(environment.removeAssetsPrefix + '/assets/')) {
      req.url = req.url.substring(environment.removeAssetsPrefix.length);
    }
    next();
  });
}

In environment.ts:

export const environment = { 
  ...
  removeAssetsPrefix: '/app'
};

Answered By - vlz