$translateMessageFormatInterpolationProvider injection error

[Feffy]

Subject of the issue

Since I added angular-translate-interpolation-messageformat to my app I have injection issues and I get the following error message:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=%24translateMessageFormatInterpolationProvider%20%3C-%20%24translateMessageFormatInterpolation%20%3C-%20%24translate

This does not show up everytime, it is actually quite random...

Your environment

• version of angular-translate: 2.18.1
• version of angular: 1.6.2
• which browser and its version: Firefox 59.0.2

I also use requireJS for DI, here's my configuration:

app.js

define([
    ...
    'angular-translate',
    'angular-translate-interpolation-messageformat',
    'messageformat',
    ....
  ],
  function (...,  angularTranslate, angularTranslateInterpolation, messageformat, ...) {

    'use strict';

    var app = angular.module('myApp', [
       ...,
      'pascalprecht.translate',
      ...
    ]);
    app.config([..., '$translateProvider', function (..., $translateProvider) {
       $translateProvider
         .translations('fr', i18n.translationsFR)
         .translations('en', i18n.translationsEN)
         .preferredLanguage('fr')
         .useSanitizeValueStrategy('escapeParameters')
         .useMessageFormatInterpolation();
    }]);

main.js

var config = require.s.contexts._.config;

/* RequireJS config overriding */
config.paths['commons'] = './bower_components';
config.paths['myApp'] = './scripts';
config.paths['jquery'] = config.paths['commons'] + '/jquery/dist/jquery.min';
config.paths['jqueryui'] = config.paths['commons'] + '/jquery-ui/jquery-ui.min';
config.paths['angular'] = config.paths['commons'] + '/angular/angular.min';
config.paths['angular-translate'] = config.paths['commons'] + '/angular-translate/angular-translate.min';
config.paths['angular-translate-interpolation-messageformat'] = config.paths['commons'] + '/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat';
config.paths['messageformat'] = config.paths['commons'] + '/messageformat/messageformat';


// = paths;
config.shim = {
  'jquery': {exports: 'jquery'},
  'jqueryui': {deps: ['jquery'], exports: 'jqueryui'},
  'angular': {deps: ['jquery'],exports: 'angular'},
  'messageformat': {exports:'messageformat'},
  'angular-translate': {deps: ['angular'], exports: 'angularTranslate'},
  'angular-translate-interpolation-messageformat' : {
    deps: ['angular-translate', 'messageformat'],
    exports: 'angularTranslateInterpolation'
  }
};

config.priority = ['jquery', 'angular', 'jqueryui'];
require.config(config);

require(['myApp/app', 'myApp/preferences'], function (app, preferences) {
  preferences.init();

  // Init angular application
  app.init();
});

[knalli]

Hello,

as we had already mentioned in the issue's template, we need a working and as minimal as possible demo covering your specific use case or issue.

Follow these steps:

1. Please open this plnkr base.
2. Fork it (at the top left).
3. Ensure the version of AngularJS and angular-translate is correct.
4. Ensure all angular-translate plugins are available; reduce and remove anything you can.
5. Write a minimal as possible demo for your specific issue.
6. Save and freeze. Provide us the final link to your demo.