user3632710 user3632710 - 8 months ago 102
AngularJS Question

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) {
.translations('en-GB', defaultI18n.en)
.useLoader('$translatePartialLoader', {
urlTemplate: '/{part}/{lang}.json'
.run(function ($rootScope, $translate) {
$rootScope.$on('$translatePartialLoaderStructureChanged', function () {

Since I'm using
in each controller view I have:

.controller('SomeController', function ($translatePartialLoader) {

If I remove
FOUC goes away, but the text isn't updated with the new locale. Not sure if having text in my HTML files maybe causing a conflict here.

How can I remove FOUC completely but still keeping the app translating correctly?

Should I remove all text from my HTML files?

Thanks in advance.


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( {
            angular.forEach(, function (value) {

    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {