angular-translate injector:modulerr error

Question

According to an excellent explanation of how to add translation using angular-translate (https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/)

I have a breaking my head error and I'm wondering why that happens? And what am I doing wrong?

Error:

angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=app&p1=Error%3A%20…alhost%3A9085%2FScripts%2Fcomponents%2Fangular%2Fangular.min.js%3A18%3A170)

Aim: Partial loading translations in my entire app

What I've done:

1. Downloaded (both) via bower and included into the project.

   • angular-translate
   • angular-translate-loader-partial

2. Added them into ReguireJS config file (after Angular)

       'angular': '../Scripts/components/angular/angular.min',
       'ngAnimate': '../Scripts/components/angular-animate/angular-animate.min',
       'ngResource': '../Scripts/components/angular-resource/angular-resource.min',
       'ngRoute': '../Scripts/components/angular-route/angular-route.min',
       'ngCookies': '../Scripts/components/angular-cookies/angular-cookies.min',
   

       'pascalprecht.translate': '../Scripts/components/angular-translate/angular-translate.min',
       'angularTranslate': '../Scripts/components/angular-translate-loader-partial/angular-translate-loader-partial.min'
   

3. Added shim:

       'pascalprecht.translate': {
           deps: ['angular']
       },
       'angularTranslate': {
           deps: ['pascalprecht.translate']
       }
   

4. In app.js file included dependencies (at the end, after angular stuff):

   'pascalprecht.translate',
   'angularTranslate',
   

   var app = angular.module('app', ['...',
                                     'pascalprecht.translate',
                                     'angularTranslate'                                         ]);

5. App.js config

      app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$translateProvider', '$translatePartialLoaderProvider',
       function ($routeProvider, $locationProvider, $httpProvider, $translateProvider, $translatePartialLoaderProvider) {
   

6. Stuff in controllers config:

define( [ 'angular', './services/services', './controllers/controllers', './directives/directives', './filters/filters', 'pascalprecht.translate' ], function(angular) { 'use strict';

var module = angular.module('common', ['common.services', 'common.controllers', 'common.directives', 'common.filters', 'pascalprecht.translate']);

return module;

});

7. Controller

define(function (require) { 'use strict';

function angularTranslate ($translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: '../Translations/locale-{part}.json'
    });

    $translateProvider.preferredLanguage('en');
}

return angularTranslate;

});

After precisely following above tutorial I still get thi error.

I albo searched in github and stackoverflow but nothing works for me.

Please help!

Answer 1

app.js looked like this:

define(
[
    ...
    'pascalprecht.translate',
    'angularTranslate',
],
var app = angular.module('app', ['...',
                                 'pascalprecht.translate',
                                 'angularTranslate'                                         ]);

but it should be like:

define(
[
    ...
    'pascalprecht.translate',
    'angularTranslate',
],
var app = angular.module('app', ['...',
                                 'pascalprecht.translate'                                                                          ]);

I've defined submodule angular-translate-loader-partial as normal module and that causes the error. Dependency between both modules (angular-translate and angular-translate-loader-partial) should be made only in requirejs shim.

Answer 2

Short: You dependency management in RequireJS is not correct. The controller's module should require angularTranslate, not pascalprecht.translate.

---

Long: At first I would advice you using the official documentation and guide which you will found at https://angular-translate.github.io/

I also recommend using both the latest AngularJS (which is 1.5.x atm) and angular-translate (which is 2.10.x atm).

Additionally, I would also advice using only the non minified versions of libraries because they will give you a much better experience. Minified source files are not for the developer.

And I would also appreciate working demo using JSFiddle, Plnkr or others because they give everyone a running proof of concept/bug.

Said this, it is not clear which version of angular-translate you are using. If you have run bower install angular-translate, you will probably have the latest already -- but the page behind the link you have referenced is made with an older one (about three years old). APIs have changed.

Coming to you actual issue: I would say you have mixed the problems both in AngularJS and RequireJS which leads in such exceptions.

First of all: Your (shim) configuration for RequireJS is misleading/confusing. You should not name the partial loader plugin as angularTranslate.

'angularTranslate': '../Scripts/components/angular-translate-loader-partial/angular-translate-loader-partial.min'

and

'angularTranslate': {
    deps: ['pascalprecht.translate']
}

Less confusing would be a name like pascalprecht.translate.partialLoader.

And now the RequireJS module dependency management:

1. You have defined a shim dependency angularTranslate -> pascalprecht.translate. Whenever the last one will be requested, the first one will be loaded before. That's fine.
2. You have defined your app depends on both pascalprecht.translate and angularTranslate (which is the partial loader actually). This is fine, but the first one is actually obsolete. It will be available automatically because you have defined the shim dependency already.
3. However the controller's module only requires the core library pascalprecht.translate.

This means: The dependency management resolver of RequireJS will not wait for the partial loader (no reason it should do this) and therefor it can/will be not available when processing the AJS injections (here: translatePartialLoaderProvider).

---

Disclaimer: I'm the co-maintainer of the AngularJS plugin angular-translate.