is runtime language translation possible with angular (@angular/localize)?

Question

I am trying to learn and add Angular Internationalization in a project. I can understand only compile time translation from angular documents (https://angular.io/guide/i18n-overview).

I need some thing like this https://stackblitz.com/github/ngx-translate/example which is third party library 'ngx-translate'.

Can't we achieve the same runtime translation just with angular library without any third party library ?

Please guide me if runtime translation is possible with angular library.

Answer 1

no solutions for runtime with i18n from angular box. Only use ngx-translate. Angular team still only talks about "we will do it in next version", but no success. I work under big project and we use ngx-translate from angular version 4 or 6. u can trust this fird party library. i18n can only build app for some baseHref like:

https://your.domain/en/...

https://your.domain/de/...

When u need to compile a lot of app for work with i18n. ngx-translate - only 1 app, and translations can be splitted by modules where this translations is need.

My advice - use ngx-translate and when angular team will make runtime language reload - rewrite project part for translation

Answer 2

You may have seen that build time translation was always the case with Angular, where you'd build the app per locale (e.g. one "en" build and one "fr" build). You'd then host each app, and have to redirect to the specific locale to be able to switch it at runtime. Not the best experience.

With Angular Ivy, there's also now an @angular/localize package which provides a $localize tagged template helper which can be used for runtime translation, but it will still use the locale you're currently on. When built in production configuration, I believe it may optimize out the other locales, and so you still can't just switch the language at runtime.

const message = $localize`:@@username:Hello {username}`;

For switching the translations at runtime, you could probably track the below issue and vote for it:

https://github.com/angular/angular/issues/38953

Especially, you can see the two comments from napei and petebacondarwin, which seems to suggest this will not be supported natively in Angular.

dynamic locale switching (of course)
Indeed this will not be supported natively in Angular.

Maybe if they get more votes they'll realise the demand for this feature :) Until then, you'll need to use 3rd party libraries like ngx-translate that has already been suggested.

Update (2024-02-27): See the below issue, which appears to suggest that it is in fact a supported option in Angular but not documented:

https://github.com/angular/angular/issues/46851#issuecomment-1912879887