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

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.

gearsdigital · Accepted Answer · 2022-11-18 09:19:07Z

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

answered Nov 18, 2022 at 9:19

gearsdigital

14.2k6 gold badges46 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vlz Over a year ago

This seems like the better solution.

gearsdigital Over a year ago

At least it worked for us.

vlz · Accepted Answer · 2022-08-12 12:53:29Z

0

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 Aug 12, 2022 at 12:53

vlz

1,0581 gold badge13 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related