Module 'angular' is not available

Question

I have a demo site running on EC2 and I pushed a version of the AngularJS app and now everything seems broken. I'm using AngularJS 1.2 and RequireJS 2.1. I have a modules/main_prod.js file. It looks like this:

(function (require) {
    "use strict";
    require.config({
        paths: {
            'jquery': '../js3p/jquery',
            'jquery-ui': '../js3p/jquery-ui',
            'jquery.ui.widget': '../js3p/jquery.ui.widget',
            'bootstrap': '../js3p/bootstrap',
            'angular': '../js3p/angular',
            'angular-sanitize': '../js3p/angular-sanitize',
            'ngUi': '../js3p/angular-ui',
            'ui.bootstrap': '../js3p/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
            'ngCalendar': '../js3p/calendar',
            'angular-ui-router': '../js3p/angular-ui-router',
            'uikeypress': '../js3p/keypress',
            'dtPicker': '../js3p/bootstrap-datetimepicker.min',
            'fileUpload': '../js3p/jquery.fileupload',
            'fullcalendar': '../js3p/fullcalendar',
            'iframeTransport': '../js3p/jquery.iframe-transport',
            'lodash': '../js3p/lodash',
            'moment': '../js3p/moment',
            'restangular': '../js3p/restangular',
            'typeahead': '../js3p/typeahead'
        },
        shim: {
            'jquery': { deps: [] },
            'jquery-ui': { deps: ['jquery'] },
            'jquery.ui.widget': { deps: ['jquery'] },
            'bootstrap': { deps: ['jquery'] },
            'angular': { deps: ['jquery'], exports: 'angular' },
            'angular-sanitize': { deps: ['angular'] },
            'ngUi': { deps: ['angular'] },
            'ui.bootstrap': { deps: ['angular', 'ngUi'] },
            'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'] },
            'angular-ui-router': { deps: ['angular', 'ngUi'] },
            'uikeypress': { deps: ['angular', 'ngUi'] },
            'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'] },
            'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'] },
            'fullcalendar': { deps: ['jquery', 'jquery-ui'] },
            'iframeTransport': { deps: ['jquery', 'jquery-ui'] },
            'lodash': { deps: [] },
            'moment': { deps: ['jquery'] },
            'restangular': { deps: ['angular', 'lodash'] },
            'typeahead': {deps: ['jquery', 'bootstrap'] }
        },
        priority: ['angular']
    });

    require(['angular',
             'angular-ui-router'],
        function (angular, routes) {
            require(['angular', 'app'], function (angular) {
                angular.bootstrap(document, ["app"]);
            });
        });
}(require));

When I load the page, I see all of these libraries loading. I even see the page load and it looks like half of Angular is working (I see directives filled in and whatnot). Anything subject to a ng-show attribute doesn't seem to work (shown when should be hidden), but my redirect that is within AngularJS does work. Every page load puts this in the console:

Error: [$injector:modulerr] Failed to instantiate module angular due to:
[$injector:nomod] Module 'angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
...

Let me know if more code is needed, I'm happy to provide. I'm at a total loss here.

Your code sample does not show how and where your 'app' is defined. — Stewie
– Stewie, Commented Jan 28, 2014 at 8:25

Nik · Accepted Answer · 2014-01-28 14:28:45Z

1

So I came to find the problem. I'm working from the ngStart seed project and when it does a build for deployment it changes the top of the index.html file:

<!doctype html>
<!--(if target build)>
      <html ng-app="angular" manifest="project.manifest">
<!(endif)-->
<!--(if target local)> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!(endif)-->
<head>

This ng-app="angular" is the actual cause of the error message. I removed it and things are behaving as expected.

answered Jan 28, 2014 at 14:28

Nik

7,28313 gold badges53 silver badges82 bronze badges

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

Comments

Dalorzo · Accepted Answer · 2014-01-27 22:56:19Z

0

You can't use angular and requirejs in this way. You need to use Angular ADM

answered Jan 27, 2014 at 22:56

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

1 Comment

Nik Over a year ago

I will examine this, but I would expect to have the same problem when I run locally. Everything is fine on my dev box (famous last words, I know).

Collectives™ on Stack Overflow

Module 'angular' is not available

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related