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＆amp; p1 =错误％3A％20 ... alhost％3A9085％2FScripts％2Fcomponents％2Fangular％2Fangular .min.js％3A18％3A170）

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

我做了什么：

通过凉亭下载（两者）并包含在项目中。
- angular-translate
- 角平移-架部分

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

控制器配置中的东西：

定义（ [ “角度”， ” ./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;

}）;

控制器

define（function（require）{ 'use strict';

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的（垫片）配置具有误导性/混淆性。您不应将部分加载器插件命名为angularTranslate。

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

和

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

较少混淆的是像pascalprecht.translate.partialLoader这样的名字。

现在还有RequireJS模块依赖关系管理：

您已定义了垫片依赖关系angularTranslate - ＆gt; pascalprecht.translate。每当要求最后一个时，第一个将被加载。没关系。
您定义的应用程序取决于pascalprecht.translate和angularTranslate（实际上是部分加载程序）。这很好，但第一个实际上是过时的。它将自动可用，因为您已经定义了填充依赖项。
但是，控制器的模块只需要核心库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'                                                                          ]);

我已经将submodule angular-translate-loader-partial定义为普通模块并导致错误。两个模块之间的依赖关系（angular-translate和angular-translate-loader-partial）应该在requirejs shim中。

角度平移注入器：modulerr错误

2 个答案: