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

Question

Ok, there is a bunch of questions with similar titles, but none of them helped me solve my problem so here it is.

I am trying to use Angular with RequireJS; I am getting the error message Uncaught TypeError: Cannot read property 'module' of undefined which is referring to the angular object within the angular-routes.js file . This suggests to me that requireJS is trying to load angular-routes before angular has loaded. I was under the impression that this wouldn't happen because I have set 'angular-route' as dependant on 'angular' within the shim. Can anyone spot what I am doing wrong here?

// 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);

My app.js file is as follows

(function() {

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

    function(config)
    {

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

}());

Answer 1

Packages are great for your internal packages, I haven't tried to load main AngularJS files as them.

Please read http://jonathancreamer.com/require-js-packages-for-building-large-scale-angular-applications/ for some better clarification and examples than change config section to something like this. Major change is replacement of packages with paths

Please also consider to change variables to camelCase style

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"
    ]
});