Improve built-in i18n "runtime translation" support

🚀 feature request

Relevant Package

This feature request is for @angular/localize (and possibly @angular/cli, @angular/compiler-cli)

Description

@petebacondarwin This is a follow-up feature request based on your comment https://github.com/angular/angular/issues/16477#issuecomment-585198070 to check if there are plans or progress on “runtime translation” as you describe below, without having to rely on www.locl.app (which is not available yet anyway).

“This is what we mean in the core Angular framework as runtime translation. But please not that the final outcome of this is effectively the same as translation at compile time. The translation happens only once; if you want to change the language at runtime then you must restart the whole application (e.g. via a reload). This has the benefit of allowing the project to deploy a single distributable with numerous translation files, which is helpful in a small number of use cases where you do not want to generate all the different translations up front.”

To give you a scenario, we are building Ionic apps using Angular so the “allowing the project to deploy a single distributable with numerous translation files” would be a great benefit to us. We are OK with reloading the app, although some built-in way to do this as the app bootstraps (or soon after) would be great to avoid workarounds etc…

Describe the solution you’d like

A single build/bundle with the ability to switch locales at runtime via a seamless reload of the app. Seamless means a way to reload the correct locale app at the early possible time based on either device info, user input, and/or locale storage (realizing that would be app specific code but some built-in hook would be great).

Since we already do the translations “up front” via xliff files, some way of hooking into those translations would be awesome. Without know the internals of Angular, a possible design for this is a single build in /dist with the translations (originating from the xliff files) distributed to dist/<locale>, with the /dist root defaulting to the sourceLocale in angular.json. Possibly there is an index.html file in each dist/<locale> that when requested by the web browser gets the main bundles from /dist but “swaps” the locale code from the current dist/<locale> folder request. I could be way off here 😃.

Describe alternatives you’ve considered

We will have to distribute all full locale builds on the device and manually reload via code (don’t have a sample of this just yet). Really (really, really, …) do not want to us ngx-translate.

[gotwig]

One caveat is to change language you still need to do a full reload

So it is not really “runtime”.

Im doing Angular professionally for several years… and sadly what I understand is that they dont listen to their community. Why does a base feature like translations have to be so complicated… I thought Angular wanted to be a dynamic and complete solution

I understand that saying this is not technical, constructive or helping. Angular has an amazing and complete documentation, but production-unusable i18n in 2022 is a no-go.

[petebacondarwin]

I agree that we should have a story for doing this just with the Angular packages. Looking into it…