$translate.use() is not switching languages #1800

SteveQiu · 2017-10-27T20:10:06Z

Subject of the issue

Upon setting fallback language, switching language with $translate.use('de')/$translate.use('en') is successful in original state but not successful after state change

Environment

version of angular-translate 2.14.0+
version of angular-translate-loader-partial 2.14.0+
version of angular 1.6.5
version of ui router 0.4.2

Steps to reproduce

Have 2 states, and 2 language packages. One partial language component for each state.

Set a fallback language. For example, en
Switch language in one state. For example, en -> de and/or de -> en
Switch state and load a different component
Switch language in one state. For example, en -> de or de -> en

Expected behaviour

Language should switch between en or de

(version 2.13.1 or lower does the trick)

Actual behaviour

The display language is stuck with en(or the fallback). If no fallback languages are given, it renders the keys.

knalli · 2017-11-01T13:52:40Z

Hello,

as we had already mentioned in the issue's template, we need a working and as minimal as possible demo covering your specific use case or issue.

Follow these steps:

Please open this plnkr base.
Fork it (at the top left).
Ensure the version of AngularJS and angular-translate is correct.
Ensure all angular-translate plugins are available; reduce and remove anything you can.
Write a minimal as possible demo for your specific issue.
Save and freeze. Provide us the final link to your demo.

SimonSimCity · 2017-11-02T07:47:23Z

@SteveQiu does my workaround, provided in #1781 fix it?

SteveQiu · 2017-11-02T21:16:42Z

@SimonSimCity Thanks for replying, but unfortunately no. If your investigation holds true, our app can be running also in race condition because we didn't set fallback language on purpose. We intended to load the language right after our app starts. There could be a conflicts between whether to load language pack or not. I am hoping that the solution can be more universal. I am working on the plunker and see if I can reproduce my bug. Mean a while, we are using 2.13.1 which seems to be running ok.

SteveQiu · 2017-11-02T22:09:36Z

https://plnkr.co/edit/q4XD5roUZv6G2tz2Mc83?p=preview

robertas88 · 2018-10-11T14:00:38Z

Hello,

I have similar issue with $translate.use().
I have forked example above to make it sort of work but some issues are still there:
https://next.plnkr.co/edit/mlsS1RmOK9fm5q6e?preview

Steps to reproduce:
run (en is preferred language and controller c1) -> de -> c2 -> en

Loading c1 $translate.refresh() loads en-c1.json but unlike $translate.use() this will keep loading promise in memory. This mean when we are in c2 and try to load en-c2.json, $translate.use() thinks that loading en-**.json is still in progress and returns old promise. $translate.use() uses function clearNextLangAndPromise(key) to clear unnecessary promises on promise.finally(). This function should be used in other translations loading functions.

Enviroment:

version of angular 1.5.11
version of angular-translate 2.18.1

deadmann · 2018-11-28T14:31:22Z

config:

$q.all(
            [
                $http.get("/App/translations/global.en.json"),
                $http.get("/App/translations/global.fa.json"),
                $http.get("/App/translations/app.en.json"),
                $http.get("/App/translations/app.fa.json")
            ]
        )
            .then(function (response) {

                $translateProvider.translations('en', {
                    global: response[0].data
                });

                $translateProvider.translations('fa', {
                    global: response[1].data
                });

                $translateProvider.preferredLanguage('en'); // -->moved to run.js
        }, function (response) {

        });

run:

var run = function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    };

rootController ( <html app=x controller=mainController ></html>):

self.globalEvent = {
            onStateChanging: function () {
                var state = $rootScope.$state;
                $translate.use(state.params && state.params.lang || 'en')
                    .then(function (key) {
                        console.log("Language Changed to " + key + ".");
                    }, function (key) {
                        console.log("Could not change the language.\n\r" + key);
                    });
            },

        //Watch State Change or $stateProvider
        $rootScope.$on('$stateChangeStart',self.globalEvent.onStateChanging); // -> fires when state is changing
        //$rootScope.$on('$stateChangeSuccess', self.globalEvent.onStateChanged); // -> fires when state has changed successfully
        //$rootScope.$on('$stateChangeError', myFunc); // -> fires when state change has failed

route as parent of all other route:

.state('root', {
                url: '/{lang:(?:en|fa)}',
                abstract: true,
                template: '<div ui-view=""></div>',
                params: {lang: {squash:true, value: 'en'}}
            })

open url:
http:https://localhost:60421/#!/fa/insert

Console:

Language Changed to en.
angular.js:14642 pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured. This can have serious security implications. See http:https://angular-translate.github.io/docs/#/guide/19_security for details.
(anonymous) @ angular.js:14642
showNoStrategyConfiguredWarning @ angular-translate.js:261
sanitize @ angular-translate.js:306
$translateInterpolator.interpolate @ angular-translate.js:2892
$translate.instant @ angular-translate.js:2615
getBaseTypesSelectDataList @ sharedService.js:29
initialize @ nestInsertController.js:510
controller @ nestInsertController.js:531
instantiate @ angular.js:5055
$controller @ angular.js:10975
(anonymous) @ angular-ui-router.js:4203
(anonymous) @ angular.js:1385
invokeLinkFn @ angular.js:10520
nodeLinkFn @ angular.js:9909
compositeLinkFn @ angular.js:9149
publicLinkFn @ angular.js:9014
lazyCompilation @ angular.js:9405
updateView @ angular-ui-router.js:4122
(anonymous) @ angular-ui-router.js:4074
(anonymous) @ angular.js:1385
invokeLinkFn @ angular.js:10520
nodeLinkFn @ angular.js:9909
compositeLinkFn @ angular.js:9149
publicLinkFn @ angular.js:9014
(anonymous) @ angular-ui-router.js:4213
(anonymous) @ angular.js:1385
invokeLinkFn @ angular.js:10520
nodeLinkFn @ angular.js:9909
compositeLinkFn @ angular.js:9149
publicLinkFn @ angular.js:9014
lazyCompilation @ angular.js:9405
updateView @ angular-ui-router.js:4122
(anonymous) @ angular-ui-router.js:4071
$broadcast @ angular.js:18698
(anonymous) @ angular-ui-router.js:3427
processQueue @ angular.js:17000
(anonymous) @ angular.js:17044
$digest @ angular.js:18182
$apply @ angular.js:18480
done @ angular.js:12501
completeRequest @ angular.js:12727
requestLoaded @ angular.js:12655
load (async)
(anonymous) @ angular.js:12638
sendReq @ angular.js:12446
serverRequest @ angular.js:12198
processQueue @ angular.js:17000
(anonymous) @ angular.js:17044
$digest @ angular.js:18182
$apply @ angular.js:18480
bootstrapApply @ angular.js:1952
invoke @ angular.js:5040
doBootstrap @ angular.js:1950
bootstrap @ angular.js:1970
angularInit @ angular.js:1855
(anonymous) @ angular.js:33826
mightThrow @ jquery-3.1.1.js:3570
process @ jquery-3.1.1.js:3638
setTimeout (async)
(anonymous) @ jquery-3.1.1.js:3676
fire @ jquery-3.1.1.js:3305
fireWith @ jquery-3.1.1.js:3435
fire @ jquery-3.1.1.js:3443
fire @ jquery-3.1.1.js:3305
fireWith @ jquery-3.1.1.js:3435
ready @ jquery-3.1.1.js:3915
completed @ jquery-3.1.1.js:3925
3mainController.js:51 
Language Changed to fa.

First it doesn't change to FA, secondly even though it said it change to fa, it still returns english language data :|

knalli added the waiting label Nov 1, 2017

knalli self-assigned this Nov 2, 2017

knalli added Needs analysis and removed waiting labels Nov 2, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

$translate.use() is not switching languages #1800

$translate.use() is not switching languages #1800

SteveQiu commented Oct 27, 2017 •

edited

knalli commented Nov 1, 2017

SimonSimCity commented Nov 2, 2017

SteveQiu commented Nov 2, 2017 •

edited

SteveQiu commented Nov 2, 2017

robertas88 commented Oct 11, 2018

deadmann commented Nov 28, 2018 •

edited

$translate.use() is not switching languages #1800

$translate.use() is not switching languages #1800

Comments

SteveQiu commented Oct 27, 2017 • edited

Subject of the issue

Environment

Steps to reproduce

Expected behaviour

Actual behaviour

knalli commented Nov 1, 2017

SimonSimCity commented Nov 2, 2017

SteveQiu commented Nov 2, 2017 • edited

SteveQiu commented Nov 2, 2017

robertas88 commented Oct 11, 2018

deadmann commented Nov 28, 2018 • edited

SteveQiu commented Oct 27, 2017 •

edited

SteveQiu commented Nov 2, 2017 •

edited

deadmann commented Nov 28, 2018 •

edited