角度平移喷射器：modulerr 错误

Posted 2023-02-23

【中文标题】角度平移喷射器：modulerr 错误

【英文标题】：angular-translate injector:modulerr error

【发布时间】：2016-09-05 12:15:45

【问题描述】：

根据对如何使用 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)

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

我做了什么：

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

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

将它们添加到 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'

添加垫片：

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

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

'pascalprecht.translate',
'angularTranslate',

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

App.js 配置

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

控制器配置中的内容：

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

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

return module;

);

控制器

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

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

    $translateProvider.preferredLanguage('en');


return angularTranslate;

);

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

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

请帮忙！

【参考方案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 模块依赖管理：

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

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

---

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

【讨论】：

knalli 这是我改进的地方：1）更改名称：从 angularTranslate 到 pascalprecht.translate.partialLoader - 正如您所建议的 2）从 app.js 'pascalprecht.translate' 依赖项中删除。仅保留“pascalprecht.translate.partialLoader”。 3) 将脚本更改为非缩小版本。但不幸的是，错误仍然发生。还尝试将控制器模块依赖项更改为 angularTranslate (new 'pascalprecht.translate.partialLoader')，但也没有成功。

另外两个脚本（angular-translate 和 angular-translate-loader-partial）都连接到项目中。应该是这样吗？我哪里错了？

必须加载两个脚本，首先是核心，然后是任何加载器/插件。在你的情况下：它必须在你的控制器之前加载。

【参考方案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 中进行。