Error: [$injector:modulerr]

Question

I am a newbie. Just learning/trying to integrate Angular with my webapp (Java + jQuery+ requireJS). I am not using any router and below is my script. From other stackoverflow I learned that this error is due to missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part. But in my below code I am not at all using any ngRouter. When I am not referencing it why am I getting this error ?

Error: [$injector:modulerr] Failed to instantiate module counter due to: [$injector:nomod] Module 'counter' 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. http://errors.angularjs.org/1.2.11/$injector/nomod?p0=counter

Template:

<ul ng-app="counter" ng-controller="counterController">
<li>
   <span class="ui-button-text" ng-bind="critical"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="error"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="warn"></span>
</li>
<li>
   <span class="ui-button-text" ng-bind="note"></span>
</li>
</ul>

JS

requirejs.config({
  paths : {  angular: "/js/lib/angular/angular.min" },
  shim : {  "angular": {  deps: [ "jquery"],  exports: "angular" } }
});

require(["angular", "jquery"],function() {

var module = angular.module('counter', []);

module.controller('CounterController', function ($scope, $http, $timeout) {
    $scope.critical = 0;
    $scope.error = 0;
    $scope.warn = 0;
    $scope.note = 0;

    function setData(d){
        $scope.critical = d.critical;
        $scope.error = d.error;
        $scope.warn = d.warn;
        $scope.note = d.note;
    }

    var getCounters = function() {
        var config = {headers: {
                'X-MY-Request': (new Date()).getMilliseconds()
            }
        };

        $http.get('xxxxxxx', config)
                .success(function(data, status, headers, config) {
            setData(data);
            $timeout(getCounters, 60000);
        }).error(function(data, status, headers, config) {
            // Handle the error
        });

    }


    $timeout(getCounters, 500);
});

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

In your template your controller name has a lowercase beginning letter counterController. Your js has it with an uppercase CounterController. Could this be the issue?

Any injected module that isn't found will throw an error. Not just ngRoute.

Edit:

I just threw a quick plunker together and without the 'require' stuff all your code is correct. So no you aren't missing anything in your angular code. All modules are working.

So the problem must be with your 'require' setup. I have literally never used it so couldn't really assist you. Look here for more Angular + Requirejs - Loading in the wrong order.

For now, if I were you, I would learn one technology at a time. Just load your angular and jquery resources and then learn how to use them. Then when you are getting a little more comfortable add 'require'.

edited May 23 '17 at 11:47

Community

1
1

answered Feb 03 '14 at 23:06

mattl

2,082
3
17
24

Nope. the counterController is the right one. I made mistake while copying it in this thread. Also, I just updated my original thread with the error message I am getting. – user2300875 Feb 03 '14 at 23:21
should I have to add app.js, router.js etc .. ? As I said my web project runs with requireJS & jQuery. Since this is my first angular module I just included angular.js into my /lib/angular folder and created a js file. I am i missing some thing ? – user2300875 Feb 04 '14 at 00:40
1

Matti, You are right about the loading. As I see some times it works. as mentioned in the thread, the it requires 'domReady' before bootstrapping angular. As far as the technology goes, as I said my webapp is already running with jQuery & requirejs. So angular is new to me & thats what I am trying to learn. Thanks. – user2300875 Feb 05 '14 at 17:17

score 1 · Answer 2 · answered Oct 18 '15 at 15:30

Had the same problem, to get more info about the error call the bootstrap function with {debugInfoEnabled: true} like so:

angular.bootstrap(document.getElementById('app-root'), ['MyApp'], {debugInfoEnabled: true});

This will print out to the console what's the underlining module that fails to instantiate.

score 0 · Answer 3 · answered Oct 17 '14 at 20:44

0

If the $injector:modulerr shows up in your test framework you may have to include the module in your test framework as well. For me it was karma and phantomjs needing an include in: test/karma.config.js

answered Oct 17 '14 at 20:44

lumine

1

score 0 · Answer 4 · answered Mar 30 '15 at 11:18

0

I encountered this error with my root app module not loading.

Eventually I reordered my dependancy list and the error whent away.

hope that helps someone. Cost me an hour!

answered Mar 30 '15 at 11:18

ErichBSchulz

15,047
5
57
61

Error: [$injector:modulerr]

4 Answers4