角度平移喷射器：modulerr 错误

Question

根据对如何使用 angular-translate (https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/) 添加翻译的精彩解释

我有一个头晕目眩的错误，我想知道为什么会这样？我做错了什么？

错误：

angular.js:36 未捕获的错误：[$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)

目标： 在我的整个应用中部分加载翻译

我做了什么：

1. 通过 bower 下载（两者）并包含在项目中。

   • 角平移
   • 角度翻译加载器部分

2. 将它们添加到 ReguireJS 配置文件中（在 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. 添加垫片：

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

4. 在 app.js 文件中包含依赖项（最后，在有角度的东西之后）：

   'pascalprecht.translate',
   'angularTranslate',
   

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

5. App.js 配置

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

6. 控制器配置中的内容：

定义( [ '角'， './服务/服务', './控制器/控制器', './directives/directives', './过滤器/过滤器', 'pascalprecht.translate' ], 功能（角度）{ '使用严格';

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

return module;

});

1. 控制器

定义（函数（要求）{ '使用严格';

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

    $translateProvider.preferredLanguage('en');
}

return angularTranslate;

});

在完全按照上面的教程之后，我仍然得到这个错误。

我在 github 和 stackoverflow 中进行了 albo 搜索，但对我没有任何帮助。

请帮忙！

Answer 1

简短：您在 RequireJS 中的依赖管理不正确。控制器的模块应该需要angularTranslate，而不是pascalprecht.translate。

---

长： 首先，我建议您使用官方文档和指南，您可以在 https://angular-translate.github.io/

找到

我还建议同时使用最新的 AngularJS（1.5.x atm）和 angular-translate（2.10.x atm）。

此外，我还建议仅使用非缩小版本的库，因为它们会给您带来更好的体验。缩小的源文件不适用于开发人员。

我也很欣赏使用 JSFiddle、Plnkr 或其他工具的工作演示，因为它们为每个人提供了概念/错误的运行证明。

这么说，尚不清楚您使用的是哪个版本的角度翻译。如果您运行了bower install angular-translate，您可能已经拥有最新的——但是您引用的链接后面的页面是用较旧的（大约三年前的）制作的。 API 发生了变化。

来到你的实际问题：我会说你在 AngularJS 和 RequireJS 中混合了导致此类异常的问题。

首先：您对 RequireJS 的 (shim) 配置具有误导性/混淆性。您不应将部分加载程序插件命名为 angularTranslate。

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

和

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

像pascalprecht.translate.partialLoader 这样的名称会更容易混淆。

现在是 RequireJS 模块依赖管理：

1. 您已经定义了一个 shim 依赖项 angularTranslate -> pascalprecht.translate。每当请求最后一个时，都会先加载第一个。没关系。
2. 您已经定义了您的应用程序依赖于pascalprecht.translate 和angularTranslate（实际上是部分加载程序）。这很好，但第一个实际上已经过时了。它将自动可用，因为您已经定义了 shim 依赖项。
3. 但是控制器的模块只需要核心库pascalprecht.translate。

这意味着：RequireJS 的依赖管理解析器不会等待部分加载器（没有理由这样做），因此在处理 AJS 注入时它可以/将不可用（这里：translatePartialLoaderProvider)。

---

免责声明：我是 AngularJS 插件 angular-translate 的共同维护者。

Answer 2

app.js 看起来像这样：

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

但应该是这样的：

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

我已将子模块 angular-translate-loader-partial 定义为普通模块，这会导致错误。两个模块（angular-translate 和 angular-translate-loader-partial）之间的依赖关系应该仅在 requirejs shim 中进行。