In my application, I use the AngularJS module Pascal Precht (translate module). I e to you because I can not get in my method myApp.Run of app.js a translation key. I can do in a controller or a view. But impossible to get it at the initialization of the project. It shows me the key, not correspondence.

Do you have a solution?

Here is my code:

var myApp = angular.module('myApp', ['ngRoute', 'ngAnimate', 'myApp.filters', 'myApp.services', 'myApp.directives', 'pascalprecht.translate']);

// Declare routeProvider
myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl:'partials/connectView.html', controller:'ConnectController'});
    $routeProvider.when('/homeView', {templateUrl:'partials/homeView.html', controller:'HomeController'});
}]);

// Declare translateProvider
myApp.config(['$translateProvider', function($translateProvider) {        
    $translateProvider.useStaticFilesLoader({
        prefix: 'res/localization/lang-',
        suffix: '.json'
    });

    $translateProvider.preferredLanguage('fr_FR');
    //$translateProvider.preferredLanguage('en_US');
}]);

// Declare Global variables
myApp.run(['$rootScope', '$filter', function($rootScope, $filter) {
    $rootScope.list = false;
    etc....

    //I'm trying to get translate Key but it doesn't work
    console.log($filter('translate')('MY_KEY'));
}]);

My AngularJS version is 1.2.16 (last stable version). Thx

In my application, I use the AngularJS module Pascal Precht (translate module). I e to you because I can not get in my method myApp.Run of app.js a translation key. I can do in a controller or a view. But impossible to get it at the initialization of the project. It shows me the key, not correspondence.

Do you have a solution?

Here is my code:

var myApp = angular.module('myApp', ['ngRoute', 'ngAnimate', 'myApp.filters', 'myApp.services', 'myApp.directives', 'pascalprecht.translate']);

// Declare routeProvider
myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl:'partials/connectView.html', controller:'ConnectController'});
    $routeProvider.when('/homeView', {templateUrl:'partials/homeView.html', controller:'HomeController'});
}]);

// Declare translateProvider
myApp.config(['$translateProvider', function($translateProvider) {        
    $translateProvider.useStaticFilesLoader({
        prefix: 'res/localization/lang-',
        suffix: '.json'
    });

    $translateProvider.preferredLanguage('fr_FR');
    //$translateProvider.preferredLanguage('en_US');
}]);

// Declare Global variables
myApp.run(['$rootScope', '$filter', function($rootScope, $filter) {
    $rootScope.list = false;
    etc....

    //I'm trying to get translate Key but it doesn't work
    console.log($filter('translate')('MY_KEY'));
}]);

My AngularJS version is 1.2.16 (last stable version). Thx

• javascript
• angularjs
• angular-translate

Share Follow asked May 23, 2014 at 9:57 Chéramy AlexandreChéramy Alexandre 46433 gold badges99 silver badges2525 bronze badges 1

• 1 How about a fiddle demonstrating the issue ? – gkalpak Commented May 27, 2014 at 22:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8 +50

Try injecting the $translate service in app.run().

angular-translate version 1.1.1 and below

myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
    $log.debug($translate('MY_KEY'));
}]);

I'd also suggest you to upgrade to the latest version of Pascal Precht's angular-translate. There are some changes in the new version.

angular-translate version 2.0.0 and above

myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
    // translate via promises (remended way)
    $translate(['MY_KEY', 'MY_OTHER_KEY'])
            .then(function (translation) {
                $log.debug(translation.MY_KEY);
            });
    // translate instantly from the internal state of loaded translation
    $log.debug($translate.instant('MY_KEY'));
}]);

See this helpful migration guide.

Why don't you inject the $translate service in the run section and then call it instead of using the filter?!

console.log($translate('MY_KEY'));

Well, Apparently I can't ment because of reputation issue, we came across something that might be what you are experiencing - since the locale file is downloaded only in the config part of angular, it might not be available (yet) when you call the translate.

We solved this by adding all the locale files upfront (we don't have many and they are small) and in the initialization we just choose the correct one, that way we avoid the problem.

(again this should probably be more of a ment then an answer, but I can't ment...)

This is not a solution for your issue, but if you try the following code in your 'run', you will get an idea, why the translation is not available at the initializing state.

myApp.run(['$rootScope', '$filter','$timeout', function($rootScope, $filter,$timeout) {
    $timeout(function(){
      alert($filter('translate')('MY_KEY'));
    },5000)
}]);

Problem here is, by the time the translation is being loaded the 'run' will be executed. So it cannot be assured that you will get the translation loaded at that time.