Introducing the JSON language package through `angular-translate-loader-static-files', several page refresh strikes

[huangmeixiang]

Subject of the issue

Describe your issue here.

Your environment

• version of angular-translate :-v2.18.1
• version of angular: v1.5.11
• which browser and its version：google

Steps to reproduce

I refreshed my browser and the page translation was not updated immediately. I use angular-translate-loader-static-files to introduce the JSON language package. The page is to create filters to internationalize the content of Html pages. Here is my code.
index.html:

<script src="resource/angular-translate/angular-translate.js?v=3a7e434f" type="text/javascript"></script>
    <script src="resource/angular-translate-loader-static-files/angular-translate-loader-static-files.js?v=eee20da7" type="text/javascript"></script>

app.js:

 angular.module('admin', ['pascalprecht.translate'])
    .config(['$translateProvider',function($translateProvider){
        let version = za.config.version || (new Date()).getTime();
        var _domain= za.config.template_url;
        var lang = LANG || 'cn';
        console.log("lang..i8n ",lang);
        $translateProvider.preferredLanguage(lang);
        $translateProvider.useStaticFilesLoader({
            prefix: `${_domain}/i18n/`,
            suffix: '.json' + '?v=' + version
        });
       
        $translateProvider.useSanitizeValueStrategy('escape');
    }]);

TranslateFilter.js:

(function () {
    "use strict";

    try {
        angular.module('admin');
    } catch (e) {
        angular.module('admin', []);
    }

    angular.module('admin')
        .filter('Translate', ['$translate', ($translate) => {
            console.log("Translate...")
            return (key) => {
                var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};

                if(key){

                    return $translate.instant(key).replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
                    
                }
            };
        }]);


}).call();

error.html:

<div class="console-message-dialog"  id="timeoutDialog">
    <div class="modal-header">
        <h5 class="modal-title" id="modal-title">{{'ErrorMessage' | Translate}}</h5>
    </div>
    <div class="modal-body clearfix" id="modal-body">
        <div class="col-sm-1 text-center">
            <span class="text-size-32 fa fa-times-circle text-warning"></span>
        </div>
        <div class="col-sm-11 breakall">
            <p>{{'SessionTimedOut' | Translate}}，{{'Please' | Translate}}<a href="{{vm.loginUrl}}">{{'ReLogin' | Translate}}</a>。</p>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn console-btn btn-primary" type="button" ng-click="vm.confirm()" ng-keypress="vm.confirmKey()">{{'Sure' | Translate}}</button>
    </div>
</div>

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead