Description
Which @angular/* package(s) are relevant/related to the feature request?
localize
Description
There are various issues and StackOverflow posts around the question how runtime translations are possible in Angular (#38953, #46783 ...). After a lot of digging around I was actually able to get all the requirements for runtime translations running using all the things Angular offers. So it is really just the poor documentation that takes a lot of time on debugging and finding the right functions.
Therefore, I suggest to add a section to the Internationalization guide under Optional internationalization practices.
Proposed solution
In this guide I would cover the following things:
- Describe pros and cons of runtime translations (why would someone want that)
- Explain the necessary functions/variables (
loadTranslations,$localize.locale,registerLocaleData,LOCALE_ID) - Describe the required format of the JSON file for
loadTranslationsand potentially a script to parsexlifftoJSON - Show a minimal/simple setup for the
main.tsandapp.module.tsfor the right initialization- Read locale from
LocalStorage - Load the translation file using
fetch - Call
loadTranslationsand init$localize.locale - Show how to lazy load only the required locale from
@angular/common/locales/using webpack - Call
registerLocaleData - Bootstrap app by dynamically importing
AppModuleafter loading translations to also translate static variables (see here) - Set
LOCALE_IDinAppModule
- Read locale from
- Some further considerations
I am happy to create a PR for this guide as soon as somebody from the Angular team gives me green light for it.
Alternatives considered
We could also extends the documentations for loadTranslation and registerLocaleData but then the developers still need to find out that these functions even exist.