Whats the best approach to set LOCALE_ID in an i18n SSR Angular 19 app?

Whats the best approach to set LOCALE_ID in an i18n SSR Angular 19 app?

I can set it on the server (app.server.config.ts) by setting this DI token:

{
provide: LOCALE_ID,
useFactory: () => {
const req = inject(REQUEST, { optional: true});
return req.path.split('/')[1]; // e.g. /en or /de
},
deps: [REQUEST],
},


This works! But now what when the client takes over (CSR)? I assume there is no way for the client to have access providers defined in app.server.config.ts, right?

So that means I need to provide it again in the client. I can do that, e.g. by setting it to navigator.language or parsing it from window.path - but it just feels dirty doing it on client and server, is this really the right approach? What's the best practice here?

Continue reading...