AngularAMD无法加载具有依赖项的模块？

Question

我尝试加载一个依赖于“restangular”的模块。但是，如果我试图在加载的模块配置中使用'RestangularProvider‘，它会给出以下错误：

Uncaught Error: [$injector:unpr] Unknown provider: RestangularProviderProvider <- RestangularProvider

这是“主”模块，当路由"/app“匹配时，它会动态加载另一个模块：

define(['angularAMD', 'angularUiRouter', 'restangular'], function (angularAMD) {
var module = angular.module(
    'Index', [
        'ui.router',
        'restangular'
    ])
    .config([
        '$stateProvider', '$urlRouterProvider', 'RestangularProvider',
        function ($stateProvider, $urlRouterProvider, RestangularProvider) {
            $urlRouterProvider.otherwise("/app");
            $stateProvider
                .state('app', angularAMD.route({
                    url: '/app',
                    templateUrl: 'app/app.html',
                    controller: 'AppController',
                    controllerUrl: 'ngload!app'
                }));
            RestangularProvider.setRequestSuffix('.json');
        }])
    .run([
        function run() {
        }])
    .controller(
    'IndexController',
    [
        '$scope', '$rootScope', '$location',
        function controller($scope, $rootScope, $location) {
        }
    ]);
angularAMD.bootstrap(module);
return module;
});

这是加载的应用程序模块：

define([], function () {
var module = angular.module(
    'App', [
        'ui.router',
        'restangular'
    ])
    .config([
        'RestangularProvider',
        function (RestangularProvider) {
        }])
    .controller(
        'AppController',
        [
            '$scope', '$rootScope', '$location',
            function controller($scope, $rootScope, $location) {
                $scope.message = "App";
            }
        ]);
return module;
});

如果没有配置中的“RestangularProvider”，应用程序就能正常工作。

但对于'RestangularProvider‘或我测试过的任何其他提供商，它都没有。

由AngularAMD加载的模块似乎不可能有任何其他依赖项。

需要明确的是，模块会加载，但依赖项似乎在加载的模块配置中不可用。

我能做什么?

PS:这是requirejs的配置：

require.config({
baseUrl: "",
paths: {
    'lodash': 'Vendor/lodash/lodash',
    'jquery': 'Vendor/jquery/jquery-1.10.2',
    'angular': 'Vendor/angular/angular-1.2.3',
    'angularAMD': 'Vendor/angular-amd/angularAMD',
    'angularRoute': 'Vendor/angular/angular-route',
    'angularUiRouter': 'Vendor/angular-ui-router/angular-ui-router',
    'ngload': 'Vendor/angular-amd/ngload',
    'restangular': 'Vendor/restangular/restangular',
    'app': 'app/app'
},
shim: {
    'angular': ['jquery'],
    'angularAMD': ['angular'],
    'ngload': ['angularAMD'],
    'angularRoute': ['angular'],
    'angularUiRouter': ['angular'],
    'restangular': ['angular', 'lodash'],
    'app': ['angularUiRouter', 'restangular']
},
deps: ['Index']

})；

Answer 1

您的配置/代码中有一些地方看起来不太对劲：

1. 你的"main“模块应该是"app.js”模块。
2. 我不清楚你的“app.js”模块在做什么。

的配置应该发生在正确的"app.js“模块中。在你的”

1. 配置“中，你引用的deps: ['Index']实际上并不存在。您应该引用"app.js“模块。

这是一个有效的柱塞演示，您可以使用angularAMD：http://plnkr.co/edit/zXRuFwoncXZux1TgVUCM?p=preview

Answer 2

我最近也遇到了类似的问题。对我来说，最有效的方法是在填充中包含"exports“，而不仅仅是”dep“。当你包含一个"exports“(不管定义的dep数是多少)时，requirejs将确保为该模块加载这些依赖项。这有意义吗？

require.config({
    baseUrl: "",
    paths: {
        'lodash': 'Vendor/lodash/lodash',
        'jquery': 'Vendor/jquery/jquery-1.10.2',
        'angular': 'Vendor/angular/angular-1.2.3',
        'angularAMD': 'Vendor/angular-amd/angularAMD',
        'angularRoute': 'Vendor/angular/angular-route',
        'angularUiRouter': 'Vendor/angular-ui-router/angular-ui-router',
        'ngload': 'Vendor/angular-amd/ngload',
        'restangular': 'Vendor/restangular/restangular',
        'app': 'app/app'
    },
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'angularAMD': {
            deps: ['angular'],
            exports: 'angularAMD'
        },
        'ngload': {
            deps: ['angular'],
            exports: 'ngload'
        },
        'angularRoute':{
            deps: ['angular'],
            exports: 'angularRoute'
        },
        'angularUiRouter': 
            deps: ['angular'],
            exports: 'angularUiRouter'
        },
        'restangular': {
            deps: ['angular','lodash'],
            exports: 'restangular'
        },
        'app': {
            deps: ['angular','angularAMD','angularUiRouter', 'restangular'],
            exports: 'app'
        }
    },
    deps: ['app']
});

我搞不懂什么是"Index“，以及为什么你定义了两个相似的模块；第一个模块应该足够了。您应该只需要调用app.js作为您的require配置中的主deps。这就是说，这主要是告诉requirejs立即使该模块可用。仔细阅读这篇文章http://requirejs.org/docs/api.html#config-shim