Angular Translations Have Arrived
The AngularPwaMessenger now uses the new Angular i18n features and will serve as an example of one use of the features.
Join the DZone community and get the full member experience.Join For Free
With Angular 10.1 the Angular-CLI has added a new feature. The $localize function will become publicly supported and the Angular-CLI supports the extraction of translations from Typescript code.
In the main.component.html template Angular i18n is used like this:
In lines 2 and 5 are the "i18n" attributes that Angular uses for translation. They have behind the "@@" a unique key string that identifies the string to translate. This project starts the key with the component identifier "main" and adds the text identifier "Login" for example. That provides a human-readable key with the context in the XLF file.
In the main.component.ts file Angular i18n is used like this:
In line 8 the component key for the main component is set by a static property of the service.
In line 14 the translation service gets injected. That stores the translations for this application.
In line 22 alert box is created with a text from the translation service. The translation service gets the component key as a parameter (optional) and the text key of the translation service for the translation requested.
The translation.service.ts stores and provides the translations:
In line 5 the map is defined to hold all the translations of this service.
In line 6 the static read-only property for the key of the translated text is defined.
In line 7 the static read-only property for the key of the component is defined.
In line 10 the translation is created with key and text for Angular i18n. The translations are evaluated at the compile time of an Angular application.
In line 11 the translation is set in the translation map. The translation key and the map key can be the same but do not have to be. The service puts a "_" between the component key and the text key.
In line 14 the method getTranslation tries to get a translation from the translation map with component key and text key.
In line 15 it is checked if the translation is found, otherwise, the service checks the map for a translation for only the text key. That enables the use of common translation texts that are overridden for certain components.
For larger projects with several modules, it will be useful to consider putting one translation service in every module. To have the translations inside the modules.
To extract the translations the Angular Cli needs the "--ivy=true" flag. The command can be found in the package.json file of the project:
In line 7 is the command that is needed to create the translation.XLF file. It can be run with 'npm run xi18n'.
The translation.xlf file now contains the translations of the templates and the typescript sources:
The important missing feature of Angular i18n has finally arrived. It makes using the Angular i18n translation a lot easier and is together with the ivy build changes for Angular i18n a big improvement. Angular i18n is now easy to use and fast to build. A big thank you to the Angular Team.
Opinions expressed by DZone contributors are their own.