angular-translate (PascalPrecht) how to avoid load text labels before translate

Question

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) {

Answer 1

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.