Angular：如何在使用SSR时为开发中的资产设置baseHref

Question

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.

Answer 1

Assuming you are using @nguniversal we solved this by creating a virtual path prefix in server.ts :

server.use(process.emv.BASE_HREF, express.static(distFolder));

The BASE_HREF is set as an environment variable during app start:

BASE_HREF=/app ng run project:serve-ssr

Answer 2

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'
};