Angularjs and Requirejs: Error: [$injector:modulerr]

Question

I started using angularjs to create a single page application and wanted to add dynamic templates (views and controllers). I read on the web that I should use requirejs for doing this so I did. I followed this tutorial @ https://github.com/marcoslin/angularAMD and tried to follow the steps.

When I wanted to open the page I get those two errors on my console:

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DWebApp%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A

and this one

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dwebapp%250AD%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A36%253A309%250Afc%252Fc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0Ac.prototype.bootstrap%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FangularAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A

I think they are both similar errors. I guess the error is coming from app.js file and this is my code:

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", ['webapp']);

app.config(function ($routeProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'app/src/home/index.html',
            controller: 'index',
            controllerUrl: 'app/src/home/'
        })
    );
});

return angularAMD.bootstrap(app);
});

and main.js

require.config({
baseUrl: "app",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular.min',
    'angularAMD' : 'libs/angularAMD.min',
    'ngload' : 'libs/ngload.min'
},

shim: {
    'angularAMD' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

and now my template files index.js:

define(['app'], function (app) {
app.factory('MainController', function (...) {

});
});

index.html

<div class="appheader">
<div class="container" style="text-align:right">
    <a><span class="glyphicon glyphicon-refresh"></span></a>
    <a><span class="glyphicon glyphicon-align-justify"></span></a>
</div>

So as you can see I have those two files in app/src/home/index.(html/js) And other files are located at app/ while ./ is the path of index.html (main page)

I really hope for help for my project and thanks in advance. :)

EDIT EDIT EDIT EDIT

Here we go: ./index.html

<!DOCTYPE html>
<html ng-app="WebApp">
<head>
    <title>Index Index Index :)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> -->
    <meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="app/css/bootstrap.min.css" />
    <link rel="stylesheet" href="app/css/yadbocss.css" />
    <script data-main="app/main" src="app/libs/require.min.js"></script>
</head>
<body ng-controller="mainController">
    <div class="row">
        <div class="col-md-12">
            <div id="main">
                <div ng-view>
                </div>
            </div>
        </div>
    </div>
</body>

./app/main.js

require.config({
baseUrl: "app/",

paths: {
    'jquery' : 'libs/jquery.min',
    'general' : 'libs/general',
    'angular' : 'libs/angular',
    'angularAMD' : 'libs/angularAMD',
    'ngload' : 'libs/ngload',
    'ngRoute' : 'libs/ngRoute'
},

shim: {
    'angularAMD' : ['angular', 'ngRoute'],
    'ngRoute' : ['angular'],
    'ngload' : ['angularAMD']
},

deps: ['app']
});

./app/app.js

define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when("/",
        angularAMD.route({
            templateUrl: 'src/home/index.html',
            controller: 'index',
            controllerUrl: 'src/home/index'
        })
    );
    $locationProvider.html5Mode(true);
});

return angularAMD.bootstrap(app);
});

Error report

1

Error: [$injector:modulerr] Failed to instantiate module WebApp due     to:
[$injector:nomod] Module 'WebApp' 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.
...

2

Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
minErr/<@http://localhost/pollit/app/libs/angular.js:68:12
...

Joe Lloyd · Accepted Answer · 2016-01-13 20:43:07Z

0

You are using routeprovider without adding it.

Angular is made up of lost of modules so you should include it in the module like

angular.module('app', ['ngRoute']);

and link it in your html

<script src="angular-route.js">

Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

also change your version of angular so you dont use min. min.js is used for production and gives you crappy errors like the one you have there.

answered Jan 13, 2016 at 20:43

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

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

17 Comments

yadbo Over a year ago

Hello, now I added angular-route via main.js and replaced the .min files. But now it says

Error: [$injector:modulerr] Failed to instantiate module WebApp due to: [$injector:nomod] Module 'WebApp' 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...

Joe Lloyd Over a year ago

in your index do you have <html ng-app="WebApp">?

yadbo Over a year ago

Yes I have this. And somewhere below I have <div ng-view> </div>

yadbo Over a year ago

I think it doesn't load ngRoute.js... I don't know why. If I include it inline to the index html file then I get TypeError: angular is undefined in ngRoute.js... I'm very confused.

Joe Lloyd Over a year ago

show your index.html and we'll see if there's anything obvious in that

|

Collectives™ on Stack Overflow

Angularjs and Requirejs: Error: [$injector:modulerr]

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related