使用带角度的requireJS；无法读取未定义的属性“模块”答案

【问题标题】：Using requireJS with angular; Cannot read property 'module' of undefined使用带角度的requireJS；无法读取未定义的属性“模块”
【发布时间】：2015-05-04 03:17:36
【问题描述】：

好的，有一堆标题相似的问题，但没有一个能帮助我解决我的问题，所以就在这里。

我正在尝试将 Angular 与 RequireJS 一起使用；我收到错误消息Uncaught TypeError: Cannot read property 'module' of undefined，它指的是angular-routes.js file 中的angular 对象。这向我表明 requireJS 正在尝试在加载 angular 之前加载 angular-routes。我的印象是这不会发生，因为我已将“角度路线”设置为依赖于垫片内的“角度”。谁能发现我在这里做错了什么？

// Setup requireJS

require.config({

    baseUrl : "scripts",

    packages : [
        { "name":"angular", "location":"../bower_components/angular", "main":"angular"},
        { "name":"angular-route", "location":"../bower_components/angular-route", "main":"angular-route"},
        { "name":"angular-animate", "location":"../bower_components/angular-animate", "main":"angular-animate"},
        { "name":"angular-storage", "location":"../bower_components/angular-storage/dist", "main":"angular-storage"},
        { "name":"jquery", "location":"../bower_components/jquery/dist", "main":"jquery"}
],

   shim:{
        'angular' : { exports : 'angular', deps : ['jquery'] },
        'angular-route' : { deps : ['angular'] },
        'angular-animate' : { deps : ['angular'] },
        'angular-storage' : { deps : ['angular'] },
    }

});

// Load app files
function loadApp($, app)
{
    angular.element(document).ready(function(){
        angular.bootstrap(document, ['mealPlannerApp']);    
    });
}
requirejs(['app'], loadApp);

我的app.js文件如下

(function() {

    // Declare AMD module with dependencies
    define(['angular', 'angular-route', 'routes'],

    function(config)
    {

        var app = angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
        app.config(config);
    });

}());

【问题讨论】：

好像你两次注入了同一个模块ngAnimate like angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']);
是的 - 谢谢。不过那是一个错字；问题依然存在...
我在您的代码中看到了很多错误（但这些并不能解释上述错误）。我认为您也需要“角度动画”

标签： javascript angularjs requirejs

【解决方案1】：

包非常适合您的内部包，我没有尝试将主要的 AngularJS 文件加载为它们。

请阅读http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/ 以获得更好的说明和示例，而不是将配置部分更改为类似的内容。主要变化是将 packages 替换为 paths

还请考虑将变量更改为驼峰式风格

require.config({
    paths: {
        angular: '../bower_components/angular/angular',
        'angular-route': '../bower_components/angular-route/angular-route',
        'angular-animate': '../bower_components/angular-route/angular-animate',
        'angular-storage': '../bower_components/angular-route/angular-storage'
    },

    shim: {
        'angular' : { exports : 'angular', deps : ['jquery'] },
        'angular-route' : { deps : ['angular'] },
        'angular-animate' : { deps : ['angular'] },
        'angular-storage' : { deps : ['angular'] },
    },

    priority: [
        "angular"
    ]
});

【讨论】：