Angular 6 – i18n vs. ngx-translate – SEO

It is understandable why developers like an ngx-translate like library to take care of internationalization. After all it makes our lives so easy by making the translation problem a 1v1 mapping. Unfortunately this is not how it works with human languages. One has two know more than one language to better understand the shortcomings of this approach.

Here’s a little example:
Say you have an app for travel expense, you have a tabular view in which one column title is “times” indicating when the expense was reported. Then imagine in such app you have a mini calculator for doing basic verification of your expenses which happens to have a multiplication button x with a layover saying “times”. When you do ngx-translate you extract them both with the same key “TIMES” which in turn the translator guy gives you back one translation for. But the first occurrence of “time” is not necessarily translated the same as the second one in all the other languages. Take Spanish for instance:

• “two TIMES three”(as in the calculator) -> “dos POR tres”
• “expense TIMES”(as in tabular view) -> “TIEMPOS de gasto”

This is actually why internationalization is moving to the direction of using a more sophisticated format such as XLF to support for meaning, description(in the case of Angular) rather the old 1-depth JSON style which cannot accommodate for translation with respect to context.

Now you may argue that this is solvable by registering two different keys for “times” which in English they happen to map to the same thing but that requires you as a developer to know all the languages your app supports while developing or you would have to go through another iteration(time is money!) of getting customer’s feedback and then adding a separate key whereas if you provide description and meaning for your message(text) then the translator takes care of it for you without you having any knowledge of the other language(If you know Spanish think about how complicated this can be with subjunctive and indicative forms of verb which are the same in English but not Spanish).

To answer your other question “Is there a way to do live language switching with angular i18n?”: yes there is. Have a look at this awesome article about state management in apps. Long story short you need to have your client and persistent states reflected in URL. Then all you need to do is to add a locale prefix to your path which causes your web server giving you the right locale build. Then whatever your app state was before changing locale change action happened is recoverable from URL(since it “reflects both the persistent and client state”).