12

I have an AngularJS application. For text translations Im using angular-translate. It works great, but when I request the first page there are some seconds before the translations are loaded that the page displays the labels.

I have read some posts about it http://angular-translate.github.io/docs/#/guide/12_asynchronous-loading#asynchronous-loading_fouc---flash-of-untranslated-content but still not working.

This is my translation module:

i18n.js:

'use strict';

/* i18n module */

angular.module('myApp.i18n', ['pascalprecht.translate'])
    .config(['$translateProvider', function ($translateProvider) {

        $translateProvider.preferredLanguage('en');

        //$translateProvider.addInterpolation('$translateMessageFormatInterpolation');


        $translateProvider.useStaticFilesLoader({
          prefix: 'languages/locale-',
          suffix: '.json'
        });
}]);

included in my app.js main file:

'use strict';


// Declare app level module which depends on filters, and services

    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.i18n', 'myApp.properties', 'angularSpinner', 'ngCookies', 'ngSanitize', 'angularCharts', 'ngProgress', 'angularMoment', 'tmh.dynamicLocale'])
      .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider, $routeParams) {
Rober
  • 5,868
  • 17
  • 58
  • 110

5 Answers5

11

ng-cloak is for preventing angular flickering, the flickering you are talking about is caused by an asynchronous request that is executed, after the initial angular bootstrap is done. You should use translate-cloak directive, which takes care of applying and removing a class on an element, as long as there is an asynchronous loader running.

Pascal Precht
  • 8,803
  • 7
  • 41
  • 53
  • translate-cloak is not working as expected ... I've included the following files, angular js, angular translate, angular-translate-loader-partial.js, angular-translatecloak.js, angular-cookies.js, angular-translate-storage-cookie.min.js.... – Jeeva J Jan 20 '15 at 08:55
  • 3
    The appearing of {{ 'WELCOME' | translate }} tag would be fixed by ng-cloak, which is caused by angular not processing the HTML tag soon enough. Translate-cloak would instead fix the appearing of WELCOME (the tag and not the correct language label) before the translation table gets loaded. – Joe H Aug 27 '15 at 13:12
3

There is a small, but important difference in between your configuration and that one in the documentation:

$translateProvider.translations('en', {
    'HELLO_TEXT': 'Hello World!'
});

This translation is loaded WITH the application synchronous and not asynchronous. If you try this one - it should work.

A total different approach would be to attach ng-cloak to the flickering keys or even do something like

<body ng-cloak>

that should work also. Watch for performance and your application configuration as implementing the static texts removes flexibility from within your app as a trade off...

Yosh
  • 382
  • 3
  • 8
  • You mean I really only need to add that ng-cloak directive. I have added to the body, and according to AngularJS docs, to smaller pieces of html code, such as divs or whatever, but honestly, I dont see any difference... I guess Im missing something. – Rober Jun 03 '14 at 15:53
  • 2
    `ng-cloak` is for preventing angular flickering, the flickering you are talking about is caused by an asynchronous request that is executed, *after* the initial angular bootstrap is done. You should use `translate-cloak` directive, which takes care of applying and removing a class on an element, as long as there is an asynchronous loader running. – Pascal Precht Jun 11 '14 at 10:36
  • Absolutely true. Yep. But before 2.x the other one is the only solution, or? – Yosh Jun 13 '14 at 10:28
  • 1
    @PascalPrecht I have checked it and I´m currently running angular-translate - v1.1.0 - 2013-09-02. So, what should I do? Should I upgrade to v2 or I guess there is a fix for my version? Should I use ng-cloak as Yosh suggested (but maybe I did something wrong, but I tried and nothing happened). I´m stuck with this... – Rober Jul 25 '14 at 18:15
  • As the branch of 2.x includes alot of other fixes and features - you should definately think about upgrading. If you don't want to change too much, think about using the instant feature which will at least give you most of the known functionality. – Yosh Jul 28 '14 at 11:11
  • I wish the comment by @PascalPrecht was an answer instead so I could up-vote it. Up-voting the thread so at least this is marked as answered. So awesome to have a module author support the community so actively. – Chad Robinson Aug 02 '14 at 13:31
  • The problem with this answer is that there will be times when you need to use asynchronous loading - e.g. when passing a loader to the translateProvider. – Ed Spencer Sep 22 '15 at 10:13
3

If you are struggling to get the right combination of ng-cloak and translate-cloak to work, don't forget that you can use the translate directive instead of the filter:

<span translate="T.GreetingText"></span>

Api Ref for the translate directive

This was a nice solution for us as we load our translations asynchronously.

Ed Spencer
  • 462
  • 1
  • 8
  • 21
0

I could never make ng-cloak work for this issue. Nor was the using of a preferedLanguage (as suggested by Pascal) an option for me.

So I solved it by adding a cumulative filter that hides the keys.

    servicesModule.filter('hideTranslationKey', function() {
      return function(input) {
        if(input.indexOf("_") == -1)
          return input;
        return "";
      };
    });

the usage being:

{{'LABEL_USERNAME' | translate  | hideTranslationKey}}
tiago
  • 195
  • 1
  • 7
0

I resolved this issue using attribute of translate "translate-default" from this 

 <span translate="[header].[application].[{{vmHeader.userDataService.config.appName}}]"></span>

to this

 <span translate="[header].[application].[{{vmHeader.userDataService.config.appName}}]" translate-default="&nbsp;"></span>
Elena Nesgovorov
  • 1