angular-translate injector:modulerr error

admin

Administrator
Staff member
According to an excellent explanation of how to add translation using angular-translate (<a href="https://technpol.wordpress.com/2013...-using-angular-translate-to-an-angularjs-app/" rel="nofollow">https://technpol.wordpress.com/2013...-using-angular-translate-to-an-angularjs-app/</a>)

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

Error:

<blockquote>
angular.js:36 Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.2.26/" rel="nofollow">http://errors.angularjs.org/1.2.26/</a>$injector/modulerr?p0=app&amp;p1=Error%3A%20…alhost%3A9085%2FScripts%2Fcomponents%2Fangular%2Fangular.min.js%3A18%3A170)
</blockquote>

<strong>Aim:</strong>
Partial loading translations in my entire app

What I've done:

<ol>
<li>Downloaded (both) via bower and included into the project.

<ul>
<li>angular-translate </li>
<li>angular-translate-loader-partial</li>
</ul></li>
<li>Added them into ReguireJS config file (after Angular)

<blockquote>
Code:
    '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',
</blockquote>

Code:
    'pascalprecht.translate': '../Scripts/components/angular-translate/angular-translate.min',
    'angularTranslate': '../Scripts/components/angular-translate-loader-partial/angular-translate-loader-partial.min'
</li>
<li>Added shim:

<blockquote>
Code:
    'pascalprecht.translate': {
        deps: ['angular']
    },
    'angularTranslate': {
        deps: ['pascalprecht.translate']
    }
</blockquote></li>
<li>In app.js file included dependencies (at the end, after angular stuff):

<blockquote>
Code:
'pascalprecht.translate',
'angularTranslate',
</blockquote></li>
</ol>

<blockquote>
Code:
   var app = angular.module('app', ['...',
                                     'pascalprecht.translate',
                                     'angularTranslate'                                         ]);
</blockquote>

<ol start="5">
<li>App.js config

<blockquote>
Code:
   app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$translateProvider', '$translatePartialLoaderProvider',
    function ($routeProvider, $locationProvider, $httpProvider, $translateProvider, $translatePartialLoaderProvider) {
</blockquote></li>
<li>Stuff in controllers config:</li>
</ol>

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

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

return module;

});

<ol start="7">
<li>Controller</li>
</ol>

<blockquote>
define(function (require) {
'use strict';
</blockquote>

Code:
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!