How can I dynamically configure APP_BASE_HREF in Angular 19 SSR with Kubernetes?

Below is one approach that many have used when migrating to Angular SSR: instead of trying to patch the built files at runtime (with placeholder replacement or rewriting req.url), you can configure each server-side render to use a dynamic provider for APP_BASE_HREF. In other words, rather than “baking in” the baseHref at build time (or replacing it in the static files), you can have your SSR engine read the incoming request’s base URL and then inject that value into the Angular dependency injection context.

Below is an outline of how you might do it:

---

1. Inject APP_BASE_HREF from the Request

Modify your server’s request handler so that for every incoming request you add a provider that sets APP_BASE_HREF based on the request. For example, assuming you can modify how AngularNodeAppEngine is configured, you could do something like:

TYPESCRIPTCopied
import { APP_BASE_HREF } from '@angular/common';
import {
  AngularNodeAppEngine,
  createNodeRequestHandler,
  isMainModule,
  writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import 'zone.js/node';

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');

const app = express();
const angularApp = new AngularNodeAppEngine({
  extraProviders: (req: express.Request) => [{
    provide: APP_BASE_HREF,
    useValue: req.baseUrl, // or derive your dynamic baseHref
  }]
});

// Serve static assets from the browser build folder.
app.use(
  express.static(browserDistFolder, {
    maxAge: '1y',
    index: false,
    redirect: false,
  })
);

app.get('/**', (req, res, next) => {
  angularApp
    .handle(req)
    .then((response) =>
      response ? writeResponseToNodeResponse(response, res) : next()
    )
    .catch(next);
});

if (isMainModule(import.meta.url)) {
  const port = process.env['PORT'] || 3000;
  app.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

export const reqHandler = createNodeRequestHandler(app);

---

2. Adjust Your Application Bootstrapping

Make sure your Angular app—in the server module—uses the injected APP_BASE_HREF appropriately. In many cases this happens automatically when Angular’s platform-server is bootstrapped, but verify that your <base href="..."> tag in index.html is not hardcoded (or if it is, that your DI token override will update it during rendering).

---

3. Remove the Placeholder Replacement Workflow

Since you now supply APP_BASE_HREF dynamically via the provider registered in your server engine configuration, there is no longer a need to bake in a placeholder (and later replace it via your Docker entrypoint). This avoids the problem where the prerenderer locks in a build-time baseHref value.

---

Why This Helps

• SSR and DI Together: When Angular Universal renders pages, it creates a new dependency injection context per request. By providing APP_BASE_HREF there, every rendered page uses the value derived from that particular request.
• No URL Rewrites: Your static files and routing configuration remain intact. You don’t have to rewrite request URLs manually or risk breaking static file paths.
• Scalable to Multiple Apps: With Kubernetes ingresses routing to different endpoints, every invocation of your server-side render can supply its own baseHref (like /965168ba2981, /2c17f3db70e2, etc.) so that the rendered HTML works as expected.

---

Final Considerations

Depending on the exact details of your setup and Angular 19’s SSR engine, you may need to adjust the exact API (for example, how extra providers are passed into the AngularNodeAppEngine). Consult the Angular Universal documentation for your Angular version to ensure the correct use of tokens and provider injection.

This approach has been found to be cleaner and more reliable than rewriting static files or trying to modify the URL mid-request.