angular internationationalization is causing problems frequently

[nideesh manian]

I am using pascalprecht.translate to do my translation. The js files are loaded using requirejs. 

Problem: Getting an error "Module 'pascalprecht.translate' is not available". This error occurs 1) when i clear the cache in browser and do a reload 2) browsing the url for first time in a machine 3) press contr f5 4) disable cache from developer tools. This error occurs sometime but not all the time. 

What i found, whenever the error happens, The angular-translate-loader.js file is downloaded before the angular-translate.js is downloaded. The module is defined in angular-translate (angular.module('pascalprecht.translate', ['ng'])), but is extended in angular-translate-loader angular.module('pascalprecht.translate').factory(..) , Hence if second file is loaded before the first. It is throwing module not found error. If i enable cache in the browser or simply press refresh after the error, it goes away and my html page is working.

I am thinking of combining the two files into a single file so that this module error goes away, but am i the only one facing the issue?

My code starts as below, I tried various things like putting angular translate while loading the main module and not in translation module. By directly adding to main.html.

define(['application', 'angular-translate','angular-translate-loader','angular-translate-static-loader', 'angular-cookies', 'angular-translate-storage-local','angular-translate-storage-cookie'], function (app) {

    app = angular.module('Translation', ['pascalprecht.translate', 'ngCookies']);

    app.config(['$translateProvider',function ($translateProvider) {

        $translateProvider.useStaticFilesLoader({

            prefix: '../Scripts/Languages/',

            suffix: '.json'

        });

.....