Angular(i18n): Missing Translations

No more waiting with translation missing warnings. Fix it with few steps.

Applications one of the goals is to reach internationally. Angular also providing tools to serve our developed applications in multiple languages.

Angular giving builtin functionalities to make the internationalization process easy for:

• Displaying dates, numbers, percentages, and currencies in a local format.
• Preparing text in component templates for translation.
• Handling plural forms of words.
• Handling alternative text.

The default language for the angular application is English US (en-us).

Everything looks fine, then what are these missing translations?

When we are working with angular downloaded examples, git-hub source codes or components developed by ourselves, sure at one point we met with time taking angular build process and screen filled with missing warnings/errors like below.

Missing Translation: When we are watching a movie which is available in multiple languages and select the option for translation but not specify the language, what will happen? automatically it streams to the default language.

Comes to our angular missing translation warnings, here also we are doing the same.

We mentioned ‘i18n’ tag like below in source component but do not provide target translation, then obviously we will get warnings.

In case we are getting an error instead of a warning, then we have to change configurations of specified language in the ‘angular.json’ file as an error to warn.

“en” : { ……., ……, “i18nMissingTranslation”: “warn”}

‘i18n’ is a tool provided by angular for translating strings to the specified language.

These are all fine. But in case our application is huge, then removing ‘i18n’ tags like surfing the ocean for shells.

But unnecessarily keeping those, the building process will be a delay. So, for that follow the below steps.

Step1: Generate the source file for translations by using the command

ng xi18n

It generates a file messages.xlf in the project src folder. Put the copy in the local folder which contains language-specific translation files.

‘messages.xlf’ file contains source code like

Step2: When we are not targeting to any language, then the ‘local’ folder already contains default language specification file ‘messages.en.xlf’.

So, copy the source code of the above in to ‘messages.en.xlf’ file, and mention target translation like below

We no longer get any warnings for missing translations if we mention targets for all declared i18n tags.

Trick: We can edit newly generated ‘messages.xlf’ file with target translations and can paste complete translations code in ‘messages.en.xlf’ file. Once done with the process, no need for ‘messages.xlf’, we can delete it.

The permanent solution always recommended than a temporary and unnecessary fix. So, until unless we need a language translation other than the default language then don’t go for i18n tags.