translateLanguage directive is not working together with asynchronous language loading by static files loader when translation files are big enough

[dmitryevseev]

Subject of the issue

translateLanguage directive is not working, when used together with asynchronous language loading by static files loader, in the case when translation files are big enough

Your environment

• version of angular-translate: 2.15.2
• version of angular: 1.5.11
• which browser and its version: Chrome 60.0.3112.90

Steps to reproduce

See the plunker

App is set to load languages from the static files with the default language en.

To the body added an element needing a translation in another language, under the element with translate-language="de" attribute.

When language files are taking longer to load (there is a race condition), the text under translate-language="de" is not translated – the translation key is shown instead.

Expected behaviour

After the translation file was loaded, the actual translations are displayed.

Actual behaviour

Elements under translate-language="de" are not translated into any language

Note

1. There is a race condition, rarely you can see plunker working as expected, restart it then to start over.
2. When I tried to create a simpler plunker with the tiny translation files, all was working as expected.

[knalli]

Sorry for the delay. Overseen this here.

As everything is event based here, we should see this issue also when using a custom loader with a explicit deferred load (setTimeout). Can you provide a demo with this?

In the tests we are using such custom loader with different timings as well:

angular-translate/test/unit/service/translate.spec.js

Lines 648 to 696 in c7e743b

	describe('$translate#use() with async loading and two unordered requests in parallel (1st win)', function () {
	var fastButRequestedSecond = 'en_US',
	slowButRequestedFirst = 'ab_CD',
	expectedTranslation = 'Hello World',
	notExpectedTranslation = 'foo bar bork bork bork',
	fastRequestTime = 1000,
	firstLanguageResponded = false,
	secondLanguageResponded = false;
	beforeEach(module('pascalprecht.translate', function ($translateProvider, $provide) {
	enableUnhandledRejectionTracing($provide);
	$translateProvider.useLoader('customLoader');
	$translateProvider.preferredLanguage(slowButRequestedFirst);
	$provide.service('customLoader', function ($q, $timeout) {
	return function (options) {
	var deferred = $q.defer();
	var locale = options.key;
	if (locale === fastButRequestedSecond) {
	$timeout(function () {
	secondLanguageResponded = true;
	// t2
	deferred.resolve({
	greeting : expectedTranslation
	});
	}, fastRequestTime);
	}
	if (locale === slowButRequestedFirst) {
	$timeout(function () {
	firstLanguageResponded = true;
	// t3
	deferred.resolve({
	greeting : notExpectedTranslation
	});
	}, fastRequestTime * 2);
	}
	return deferred.promise;
	};
	});
	}));
	var $translate;

Basics: The promise resolve will be deferred with a specific amount of time.

[dmitryevseev]

Thank you for the response @knalli .
You're right it can be reproduced with the custom loader too, here is a demo (with timeout of 1s for both languages)

But I'm also seeing de_DE showing untraslated content even with timeout time set to 0 for both languages.

It's though working in the case when first language takes longer to load than second (2s vs 1s)

Hope that helps

[knalli]

Fix in canary.