Change fallback language during runtime

[elgerlambert]

Hi,

First off, thanks for angular-translate, great project! I have run into a use case though, which I don't know how to solve and wanted to reach out for advice/help.

We are in the process of adding support for a second language of our application. Users will be able to select their preferred language. Their preference is persisted in the back-end.

Now for the complication. For some of our customers we use regions to provide custom translations for a subset of labels; 'en_CUSTOMERID'. Because we only translate a subset we also set the fallbackLanguage to 'en'. In other words:

$translateProvider.preferredLanguage('en_CUSTOMERID')
$translateProvider.fallbackLanguage('en')

The problem is that it isn't until runtime that we know the user's preference (either because the user changes it during runtime, or more often because we receive the user's preferences through our initial call to the back-end). To my knowledge, at runtime, the only option available is to set the user's preference through $translate.uses(). This can lead to the following situation:

$translateProvider.preferredLanguage('en_CUSTOMERID')
$translateProvider.fallbackLanguage('en')
....
$translate.uses('nl_CUSTOMERID')

What I would like to do is something like $translate.fallbackLanguage('nl'), to match the user's preferred 'base' language. What are my options? The only moment to set the fallbackLanguage is via the translateProvider, which is only available during module.config() and I don't see how I can know the user's preferences at that time (as opposed to the application's default language).

Any help would be much appreciated.

Kind regards,
Elger

p.s. I tried starting a new google groups topic instead of this issue, but it looks like the group is configured in such a way that this isn't allowed.

[0x-r4bbit]

Hey @elgerlambert !

Thanks for your great feature request. So yea, you right. There's currently no way to change a fallback language at runtime. I refactored the entire fallback language process in canary branch (or fallback-languages since its not merged yet), which lets you define more than one fallback language.

So this doesn't solve you problem, I'm just dropping it here to elaborate with you on that. So in angular-translate 2.0 (which will be released hopefully in february) you would do something like this:

$translateProvider
  .preferredLanguage('en_CUSTOMERID')
  .fallbackLanguage(['en', 'de', 'fr']);

This would take care of loading all your fallback translations one by one, so that there are available once needed. Now, when using localStorage to remember the language, it could be that there's e.g. de stored which is then the actual preferred language, rather than en.

In such situations, we start iterating over fallback language from the index of the language key that comes out of the storage, an and put the preferred language (the original one en) at the end of the stack, to make sure the preferred language is also always the last fallback language.

What you want is actually more a way to define an active fallback language. angular-translate doesn't really care what are your fallback languages. it just iterates over your registered fallback languages, and tries to find translation ids there. If it doesn't find a translation id in a fallback language, it tries the next one.

So when saying we want to tell which fallback language to use in the case where more than one are available, we have to catch that some how.

Just leaving my thoughts here, but I think we should get this in.

[DWand]

Hello, @elgerlambert. How about a partial loader? Using it you can construct a structure of translation table for languages in a very flexible way. You even can change a structure a translation table in runtime by adding and deleting parts.

[0x-r4bbit]

@DWand this is a too heavy work around in my opinion. It should be as easy as @elgerlambert proposed.

[DWand]

I don't think this is a workaround. But, maybe, you are right.

[0x-r4bbit]

@DWand You can't setup fallback languages with partial loader, can you?

[DWand]

Erm... What are "fallback languages partial loader"?

With partial loader you are able to replace parts in runtime. You can delete part1 and add part1-custom instead. Than you call refresh, angular-translate calls loader again, loader returns reconstructed table and all is done.

For example:
Structure of translation table before [part1, part2, part3]
Structure of translation table after [part1-custom, part2, part3]

But yeah, this approach requires additional codding.

[0x-r4bbit]

Updated the comment. sorry.

[0x-r4bbit]

And what about fallback languages? @elgerlambert wanted to have a way to switch the fallback language at runtime. There's no interface for that yet.

[DWand]

If the loader is not able to fetch a new part, it will reject a promise and angular-translate will reject refresh and translation table will still contain "part1" and not "part1-custom".

[DWand]

Hm... It's really tricky and depends on the particular situation a lot.

If there are some modifications for all languages, this approach is applicable.
For example, there are languages "en", "fr" and "de". And each language has "general", "custom1" and "custom2" modifications. You can change modifications with partial loader, but fallback language will also change modification. Let's say current language is "en" and fallback language is "fr". If you change modification to "en-custom", fallback language will be "fr-custom".

But if modification are not available for every language, or if you don't want to change modification off all languages at once, this approach with partial loader is not applicable.

[DWand]

Here is an example of what I'm talking about: http://plnkr.co/v1QsiEx4E11Z7Ba3irOp

[elgerlambert]

Hi guys,

Thanks for your fast replies and the discussion!

I read about the option to specify an array of fallback languages. A nice addition, but like you I concluded this unfortunately doesn't solve my use case, since our 'base' translation tables are identical to each other in terms of translation string id's (they are both complete translation tables).

You're right in the sense that I would like to tell angular-translate which fallback-language should be active (or at least tried first).

There might be an opportunity to solve this problem/use case transparently.. whereby $translate.uses('locale') checks to see if the language has specified a region (i.e. 'language_region') and checks whether the 'language' is one of the available fallback languages..?

Using a partial loader seems rather complex for what I'm trying to achieve. I'm still trying to wrap my head around it, but I'll dig into your plunker further to see if it might be a viable option for the short-term.

Kind regards

[DWand]

How about something like fallbackFactory which will provide a user way to implement any tricky strategy of handling multiple fallback languages? Here is an example of API:

/**
 * @param string brokenLangKey A language key of the broken language
 * @returns string A language key of fallback language for the broken langauge
 */
fallbackFactory.getFallback = function(brokenLangKey) {
  // some logic here
  return fallbackLangKey;
}

or something like that.

1. Can this solve an issue?
2. Is it possible to implement?

UPD: Also provide some default fallback factory and link it to the fallbackLanguage method )

[tspaeth]

hm. Well... somehow I'm a little bit confused now. :-)

In our project we use

$translate.fallbackLanguage(...) 

to set the fallback-stack at runtime whenever a user changes his personal preferences.