Adding Angular to Requirejs application is displaying Error: [$injector:modulerr]

Question

Im trying to add AngularJS to my web application which already makes use of RequireJS. I have followed a couple of YouTube and web tutorials but for some reason, when loading my test page, i am seeing:

1) Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=MyApp&p1=%5B%.....

2) TypeError: Modernizr is undefined
if (!Modernizr.history) {

3) For some reason jQuery has stopped working too.

Here's my tree:

resources
   - CSS
   - js
        - controllers
             - MainController.js
        - libs
             - angular.js
             - jquery.js
             - require.js
             - mondernizr.js
             ......
             ......
             ......
        main.js
        app.js
pages
        test.html

main.js

(function(require) {
'use strict';

require.config({
    baseUrl: '/resources/js',
    paths: {
        'jquery'    : 'libs/jquery',
        'angular'   : 'libs/angular',
        'router'    : 'libs/page',
        'history'   : 'libs/history.iegte8',
        'event'     : 'libs/eventemitter2'
    },
    shim: {
        'zepto'     : { exports: '$' },
        'angular'   : { exports : 'angular' },
        'router'    : { exports: 'page'}
    }
});



require([
    'controllers/MainController'
]);

})(this.require);

app.js

define(['angular'], function(angular) {
return angular.module('MyApp', []);
})

MainController.js

require(['app'], function(app) {
    app.controller('MainController', function() {
        this.message = "Hello World";
    })
});

test.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>AngularJS Test</title>
</head>
    <body>        
        <div ng-controller="MainController as main">
            {{ main.message }}
        </div>    

        <script src="/resources/js/libs/require.js" data-main="/resources/js/main"></script>

    </body>
</html>

Using AngularJS v1.2.16

Any help appreciated.

UPDATE ******************************************

Have added <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.js"></script> to my test.html page and the Error: [$injector... error has disappeared.

Only error now showing is:

TypeError: Modernizr is undefined

if (!Modernizr.history) {

Followed advice on here: http://activeintelligence.org/blog/archive/error-injectornomod-module-ngroute-is-not-available/

Louis · Accepted Answer · 2014-04-10 12:00:37Z

1

I went over to Modernizr's site and checked the code. I see that it does not call define to define itself as a module so Modernizr is not AMD-compliant and you need a shim for it to tell RequireJS what the module value should be:

shim: {
    ...
    modernizr: { exports: 'Modernizr' }
}

answered Apr 10, 2014 at 12:00

Louis

152k28 gold badges287 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oam Psy Over a year ago

added your suggestion above, still getting the error.

Collectives™ on Stack Overflow

Adding Angular to Requirejs application is displaying Error: [$injector:modulerr]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related