Search code examples
angularjsangular-translate

Multiple log messages for missing translations in Angular-Translate

I added the Missing Translation Handler Log on my AngularJS app to print on console any missing translation for a string. However, it seems that all the messages are printed on the console multiple times.

Here is the log:

Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118
Translation for deleteMyAccount doesn't exist angular.min.js:118

This is the AngularJS code on app.module.js file:

  translateConfig.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];
    function translateConfig($translateProvider, $translatePartialLoaderProvider) {

        $translatePartialLoaderProvider.addPart('header');
        $translatePartialLoaderProvider.addPart('index');

        $translateProvider
            .useLoader('$translatePartialLoader', {
                urlTemplate: 'i18n/{lang}/{part}.json'
            })
        .useSanitizeValueStrategy('escape')
        .preferredLanguage('en')
        .useMissingTranslationHandlerLog();
    };

How can a dig more and find the source of the problem?

AngularJS 1.5.8

Angular-Translate 2.13.1

Solution

  • Answer adapted from my reddit comment.

    You didn't share enough code. How do you use it? If you use the translate filter and don't use one-time bindings it will try to translate your strings on every digest and thus spam your console. It actually reveals a possible performance issue.

    Do you use translate="deleteMyAccount" attribute directive or {{ 'deleteMyAccount' | translate }} filter? In the latter case Angular tries to translate the string every time anything changes in your application causing the error message to appear many times. To fix this you can turn it into a one-time binding by adding :: after the starting bracket like so: {{:: 'deleteMyAccount' | translate }}. I think it is a good idea to always use one-time bindings if you do not expect your value to change dynamically.