Partial Loader Not Interpolating Values On First Page Load

Subject of the issue

I’m making use of the translate directive, partial loader, loader cache, and the gulp-ng-lang2js tool. When I navigate to a page for the first time, the IDs are not interpolated. If leave the page and come back, they will be interpolated. Translation IDs will also be interpolated if I go directly to the page by URL.

This is what my configuration looks like:

$translateProvider
        .useLoader('$translatePartialLoader', {
          urlTemplate: 'i18n/{part}/lang/{lang}.json'
        })
        .useSanitizeValueStrategy('sanitize')
        .fallbackLanguage('en')
        .preferredLanguage('en')
        .useLoaderCache('$translationCache')
        .forceAsyncReload(true);

angular.module("myApp")
  .run(["$rootScope", "$translate",
    function($rootScope, $translate) {
      $rootScope.$on('$translatePartialLoaderStructureChanged',
        function() {
          $translate.refresh();
        });
    }
  ]);

I have pulled $translationCache into my controller and found it does indeed contain the cached table on first load. I am calling $translatePartialLoader.addPart() in the controller. I watch the network tab in Chrome Devtools and verified that no call is made to the server to get the translation table.

Essentially what I am finding is that $translatePartialLoader.addPart() MUST be called before loading the controller and not within the controller, even though I have already cached the translation table.

What is going on?

Your environment

• version of angular-translate ^2.12.1
• version of angular 1.5.8
• which browser and its version Chrome 54.0.2840.90

Steps to reproduce

Working on a Plunker

Expected behaviour

The ID’s should be interpolated on first load.

Actual behaviour

The IDs are not interpolated on first load, but are interpolated when returning to the page.

[mtwar]

The fix I made for this also causes a regression where the translate cloak directive will not decloak on the first load of a particular part. This is due to a problem in the way the promises from loadAsync are handled in refresh. The $q.all promise resolves after all of the handlers on the individual promise queues, which will always cause determineTranslation to have a cache miss on the first call to $translate after a part is added, this first call being the one from the translate-cloak directive. The fix is to just add the translations call (to update the global table) to each promise queue individually before the q.all promise is established. I’ll include this as well with the other fix I mentioned previously. I think I now have two for translate-cloak, two for refresh, and one for the partial loader that together make them behave sanely together. I’ll be sure to post them soon; bug me if I don’t!

[mtwar]

Fix here: https://github.com/angular-translate/angular-translate/pull/1688