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

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

}());

seems like you have injected same module twice ngAnimate like angular.module('mealPlannerApp', ['ngRoute', 'ngAnimate', 'ngAnimate']); — Pankaj Parkar
– Pankaj Parkar, Commented May 3, 2015 at 17:44
True - thanks. That was a typo though; problem still persists... — Ben Wainwright
– Ben Wainwright, Commented May 3, 2015 at 17:52
I see quite a few bugs in your code (but these don't explain the above error). I think you need to require "angular-animate" too — asgoth
– asgoth, Commented May 3, 2015 at 18:09

Krzysztof Safjanowski · Accepted Answer · 2015-05-03 19:17:36Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related