Subject of the issue When using an async loader and <code class="n

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Unexpected behavior registering translations with .translations() and using an async loader with .forceAsyncReload(true) about angular-translate HOT 3 CLOSED

Agustin-Q commented on May 27, 2024

Unexpected behavior registering translations with .translations() and using an async loader with .forceAsyncReload(true)

from angular-translate.

Comments (3)

knalli commented on May 27, 2024 1

Tip: If you still have to deal with the time until its loaded, you may have a look at $translate.onReady() or translate-cloak.

from angular-translate.

knalli commented on May 27, 2024

Hi @Agustin-Q

that's is interesting finding. The feature is really a couple of years old, but no one has issued this one. Unfortunately, the project more or less deprecated as angular (Angular JS 1.x) itself is deprecated also. Speaking of this, you are aware not using the latest versions?

However, you may look into it for a fix. Yes, it looks like the directive should resolve the well-known (static) defined value, but instead waiting for the async loaded one. On other hand, a service call to $translate(…) should maybe resolve to the right one? Nevertheless, this would be a breaking change, so I would recommend a flag for this.

The directive is calling the service here with already a couple of flags.

angular-translate/src/directive/translate.js

Lines 294 to 299 in 1114534

 $translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText, scope.translateLanguage, scope.sanitizeStrategy) 

 .then(function (translation) { 

 applyTranslation(translation, scope, true, translateAttr); 

 }, function (translationId) { 

 applyTranslation(translationId, scope, false, translateAttr); 

 });

... which invokes the service function here:

angular-translate/src/service/translate.js

Line 1124 in 1114534

 var $translate = function (translationId, interpolateParams, interpolationId, defaultTranslationText, forceLanguage, sanitizeStrategy) { 

In detail, these lines wait for the existing (async) load and could maybe modified not waiting for the load.

angular-translate/src/service/translate.js

Lines 1177 to 1204 in 1114534

 var promiseToWaitFor = (function () { 

 var promise = langPromises[uses] || langPromises[$preferredLanguage]; 

 fallbackIndex = 0; 

 if ($storageFactory && !promise) { 

 // looks like there's no pending promise for $preferredLanguage or 

 // $uses. Maybe there's one pending for a language that comes from 

 // storage. 

 var langKey = Storage.get($storageKey); 

 promise = langPromises[langKey]; 

 if ($fallbackLanguage && $fallbackLanguage.length) { 

 var index = indexOf($fallbackLanguage, langKey); 

 // maybe the language from storage is also defined as fallback language 

 // we increase the fallback language index to not search in that language 

 // as fallback, since it's probably the first used language 

 // in that case the index starts after the first element 

 fallbackIndex = (index === 0) ? 1 : 0; 

 // but we can make sure to ALWAYS fallback to preferred language at least 

 if (indexOf($fallbackLanguage, $preferredLanguage) < 0) { 

 $fallbackLanguage.push($preferredLanguage); 

 } 

 } 

 } 

 return promise; 

 }());

In specific this line

angular-translate/src/service/translate.js

Line 1178 in 1114534

var promise = langPromises[uses] || langPromises[$preferredLanguage];

"finds" the existing promise.

Feel free providing the solution here or making up a PR.

Thank you.

from angular-translate.

Agustin-Q commented on May 27, 2024

Hi @knalli
Thanks for the detailed response I will look into a possible fix.
For the time being I think I can use the following workaround with forceAsyncReload disabled:

app.run(["$translate", function($translate){
  $translate.onReady(function(){
    $translate.refresh($translate.use());
  });
}]);

As I only need to load the async translations once.

Kind regards

from angular-translate.

Unexpected behavior registering translations with .translations() and using an async loader with .forceAsyncReload(true) about angular-translate HOT 3 CLOSED

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	$translate(translationId, interpolateParams, translateInterpolation, defaultTranslationText, scope.translateLanguage, scope.sanitizeStrategy)
	.then(function (translation) {
	applyTranslation(translation, scope, true, translateAttr);
	}, function (translationId) {
	applyTranslation(translationId, scope, false, translateAttr);
	});

	var promiseToWaitFor = (function () {
	var promise = langPromises[uses] \|\| langPromises[$preferredLanguage];

	fallbackIndex = 0;

	if ($storageFactory && !promise) {
	// looks like there's no pending promise for $preferredLanguage or
	// $uses. Maybe there's one pending for a language that comes from
	// storage.
	var langKey = Storage.get($storageKey);
	promise = langPromises[langKey];

	if ($fallbackLanguage && $fallbackLanguage.length) {
	var index = indexOf($fallbackLanguage, langKey);
	// maybe the language from storage is also defined as fallback language
	// we increase the fallback language index to not search in that language
	// as fallback, since it's probably the first used language
	// in that case the index starts after the first element
	fallbackIndex = (index === 0) ? 1 : 0;

	// but we can make sure to ALWAYS fallback to preferred language at least
	if (indexOf($fallbackLanguage, $preferredLanguage) < 0) {
	$fallbackLanguage.push($preferredLanguage);
	}
	}
	}
	return promise;
	}());