AngularAMD無法加載具有依賴項的模塊？

Question

我嘗試加載對“矩形”具有依賴性的模塊。 但是，如果我嘗試在已加載的模塊配置中使用“ 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. 您的“主要”模塊實際上應該是“ app.js”模塊。
2. 我不清楚您的“應用程序”模塊在做什么。 restangular的配置應在適當的“ app.js”模塊中進行。
3. 在您的“ requirejs配置”中，您引用的是deps: ['Index']實際上並不存在。 您應該改為引用“ app.js”模塊。

這是一個有用的plunker演示，您如何使用angularAMD輕松加載Restangular ： http ://plnkr.co/edit/zXRuFwoncXZux1TgVUCM?p= preview

Answer 2

我最近遇到了類似的問題。 對我而言，最有效的方法是在墊片中包含“出口”，而不僅僅是“ deps”。 當您包含“導出”（無論定義的deps數量）時，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']
});

我對“索引”是什么以及為什么要定義兩個相似的模塊感到困惑。 第一個就足夠了。 您只需要在require配置中將app.js稱為主要部門。 這基本上告訴requirejs立即使該模塊可用。 請仔細閱讀以下內容：http：//requirejs.org/docs/api.html#config-shim