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

Answer 3

It is possible but not out of the box. Angular localize has the loadTranslations function that loads the translation on runtime. However it does not have any function to get the translation from resource file. To do that use the following 3rd party package.

https://github.com/soluling/I18N/tree/master/Library/Angular

Answer 4

I looked up the Ticket after I found this thread and found an interesting answer, that6 dynamic language switching at runtime seem to be possible since the total switch to Ivy:

referring to the answer of petebacondarwin https://github.com/angular/angular/issues/38953#issuecomment-862492065

Later a discussion is held over some problems but in general it should work

That is great feedback, thank you @napei. I am pleased to say that many of your points are actually supported (if not well documented) by the built-in i18n now:

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

one build output, many languages (faster build times) This is now the default for i18n since Ivy

JSON language files. I had a hard time getting used to XLIFF and making i18n tools work with it, I also confused other people that worked with me with XLIFF as its not necessarily the prettiest thing. JSON also integrates much nicer with external tools (when I started using it I chose to deploy weblate) Built-in i18n now supports consuming and extracting to two JSON formats: a simple key-value one, and the slightly more sophisticated ARB format.

I can get translation data from inside TS which helps for stuff like dynamic buttons or other messages. I've since moved away from putting strings in TS but it was a thing I could do, so I used it. Since Ivy this is also now supported in the form of static backtick strings that are "tagged" with $localize.

Lazy-loading translations along with lazy-loaded routes. Completely irrelevant with non-runtime methods because it's all static content and probably wasteful but still, useful to normalise how things are done along with lazy-loading modules in Angular. It is actually now possible to lazy load translations, if you are willing to do the translation of messages in the browser rather than getting the benefit of compile-time translation. This is an area that is not well documented, but @alexcotelin is working on an example and some docs for this.

Observables. I can subscribe to language changes, look at the current language, do things to state in NGRX etc. As a corollary to no-dynamic locale switching, this will not be supported built-in.

No redirects, language is set from a user account/localStorage and loaded first without redirecting to locale-specific sites /en or /id etc. This also simplified deployment (firebase) beccause I don't have to do anything extra in server-land. It's not an SSR app (yet) so I don't have access to, for example, determining the Accept-Language header and redirect before serving. (Maybe there's other ways but never was bothered to look). As part of the ability to do the translation in the browser, mentioned above, it is possible to set the locale at bootstrap time based on something other than the URL, so this is also effectively supported.