Our Angular i18n workflow

At atuin.media, we are currently working on a large business application for a customer that operates in several European countries. Therefore, internationalization was a key requirement. Since our preferred framework is Angular and the client wanted a standardized translation process, we decided to use Angular’s own internationalization framework (i18n) along with the XLIFF localization standard file format.

As you may know, working with XLIFF files can be quite tedious, especially when it comes to synchronizing the source and target translations. Below is a brief description of the process and tools that have worked for us.

Synchronize target language files

If the source language file has changed, the target files must reflect the changes. However, existing translations in the target files must not be lost. Consequently, one must synchronize the source language file with the target language file. Here are two possible methods that worked for us:

Using Visual Studio Code

To synchronize the source changes with a target language file use Visual Studio Code with the XLIFF Sync plugin. At first, define the base file for the plugin and then use the context menu option “Synchronize Translation Units” on the target xlf file.

Using Powershell Script

This synchronization method requires a windows system and the XLIFF Sync powershell module. For each target language, there needs to be a powershell script defined. The following call will sync the translations from the source locale de-AT to the target locale en-GB:

Sync-XliffTranslations -sourcePath ".\src\locale\messages.de-AT.xlf" -targetPath ".\src\locale\messages.en-GB.xlf"

Add target translations

After the new translation units have been synced to the target language file the new target translations can be added. This can be done using a tool such as POEdit or manually within the file.

Allow the user to switch the locale in the application

The user should be able to select the localization in the application itself. When entering the application again, the user should then automatically jump to the last selected localization. Since Angular builds a separate bundle for each localization, switching can be achieved via a simple redirection. At first, the current locale has to be stored on the client. This can be done within the app components constructor:

When the user then selects a new locale from the select menu, the locale id stored within the local storage on the client has to be cleared and a redirection to the app with the selected locale has to be made:

During the initialization of the app, we then can check if the locale id of the current bundle matches with the locale id stored on the client. In case these ids are different, redirect to the correct app bundle: