How To Fix Angular-translate Fouc Issues While Using Translatepartialloader?

I've been experiencing FOUC (flash of untranslated content) issues while using angular-translate. This is my setup: .config(function ($translateProvider, defaultI18n) { $transl

Solution 1:

I changed the logic a bit and the FOUC issues seem to disappear. Instead of executing $translatePartialLoader.addPart('path-to-some-view-i18n'); in each controller, I defined for each state the respective i18n route(s) like this:

.state('state1', {
    url: '/state1',
    templateUrl: 'path-to-some-view',
    data: {
        i18n: ['path-to-some-view-i18n']
    }
})

And then, when the event $stateChangeStart is triggered:

.run(function ($rootScope, $translate, $translatePartialLoader) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if(toState.data.i18n) {
            angular.forEach(toState.data.i18n, function (value) {
                $translatePartialLoader.addPart(value);
            });
        }
    });

    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });
});