将 requireJS 与 angular 一起使用；无法读取未定义的属性 'module'

Question

好的，有很多标题相似的问题，但其中 none 帮助我解决了我的问题，所以就在这里。

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

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

}());

Answer 1

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

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

替换 packages

还请考虑将变量更改为驼峰式大小写

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

将 requireJS 与 angular 一起使用；无法读取未定义的属性 'module'

Using requireJS with angular; Cannot read property 'module' of undefined

javascript

requirejs

angularjs

将 requireJS 与 angular 一起使用；无法读取未定义的 属性 'module'

Using requireJS with angular; Cannot read property 'module' of undefined

javascript

requirejs

angularjs

将 requireJS 与 angular 一起使用；无法读取未定义的属性 'module'