Module is not available, misspelled or forgot to load (but I didn't)

Question

I am fairly new to angular and using it with JSON api files. TO test, I am trying to use the free github api (my names for functions are for a different json api that i will be working with later). I just wanted to see if my functions were working with console.log(), but i receive this error in the console.

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

I have spelled MesaViewer the exact same in both, and dependencies are seen in the second line!

var app = angular.module("MesaViewer");
var MainController = function($scope, $location, $http, $routeParams) {

What did I do wrong? Here is my plunk: http://plnkr.co/edit/sZPaFbzbOB6AmVCLL1vq

as a part of the syntax, `[]` is mandatory. It is used to add dependencies in to your app, e.g., other modules. like `['yourModuleName', 'anotherModule']`. You still got to include the blank array, `[]` even if you have no dependencies on other modules. — Sudhansu Choudhary, Jul 13 '15 at 23:12

Matt Herbstritt · Accepted Answer · 2016-03-23T04:59:03.983

100

It should be

var app = angular.module("MesaViewer", []);

This is the syntax you need to define a module and you need the array to show it has no dependencies.

You use the

angular.module("MesaViewer");

syntax when you are referencing a module you've already defined.

edited Mar 23 '16 at 04:59

answered Jul 13 '15 at 23:01

Matt Herbstritt

4,754
4
25
31

1

And make sure that if you have multiple js files referenced in your HTML, that the one where the module is defined is loaded first, or you will still get a "nomod" error, even if you have declared it. – Yvonne Aburrow Sep 26 '16 at 13:44

score 15 · Answer 2 · answered Jul 13 '15 at 23:03

You are improperly declaring your main module, it requires a second dependencies array argument when creating a module, otherwise it is a reference to an existing module

Change:

var app = angular.module("MesaViewer");

To:

var app = angular.module("MesaViewer",[]);

Working Version

score 11 · Answer 3 · answered Jul 18 '17 at 16:30

11

I had the same error and fixed it. It turned out to be a silly reason.

This was the culprit: <script src="app.js"/>

Fix: <script src="app.js"></script>

Make sure your script tag is ended properly!

answered Jul 18 '17 at 16:30

Sruthi Poddutur

1,371
13
7

Possibly even sillier for me! I had accidentally typed the src as "/js/app.js", when what I really wanted was "js/app.js" without the initial slash. That meant it worked in one development environment but not another! – kqr Feb 17 '18 at 08:55

Slicedbread · Answer 4 · 2017-07-30T18:00:47.640

7

I found this question when I got the same error for a different reason.

My issue was that my Gulp hadn't picked up on the fact that I had declared a new module and I needed to manually re-run Gulp.

edited Jul 30 '17 at 18:00

answered Jan 25 '17 at 19:24

Slicedbread

2,208
3
21
28

score 5 · Answer 5 · answered Mar 03 '20 at 23:11

5

I got this error when my service declaration was inside a non-invoked function (IIFE). The last line below did NOT have the extra () to run and define the service.

(function() {
    "use strict";

    angular.module("reviewService", [])
        .service("reviewService", reviewService);

    function reviewService($http, $q, $log) {
        //
    }
}());

answered Mar 03 '20 at 23:11

Todd Hale

480
8
15

2

someone give this guy a medal. Thanks Todd. – Hardik Shah Nov 10 '20 at 08:24
1

Thanks, I'm new to AngularJS but was sure I had declared the module correctly, it was driving me nuts. This was the cure! – coppereyecat Apr 19 '21 at 22:58

score 4 · Answer 6 · answered May 28 '17 at 21:27

4

I have the same problem, but I resolved adding jquery.min.js before angular.min.js.

answered May 28 '17 at 21:27

Roberth Godoy

41
1
4

score 4 · Answer 7 · answered Sep 06 '18 at 09:58

4

make sure that you insert your module and controller in your index.html first. then use this code in your module var app = angular.module("MesaViewer", []);

answered Sep 06 '18 at 09:58

sandeep kumar

124
1
4

score 2 · Answer 8 · answered Jun 30 '18 at 14:37

Using AngularJS 1.6.9+

There is one more incident, it also happen when you declare variable name different of module name.

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

to get rid of this error,

Error: [$injector:nomod] Module 'indexPageApp' 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.

change the module name similar to var declared name or vice versa -

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

score 1 · Answer 9 · answered Jul 03 '17 at 06:45

1

I had the same error but i resolved it, it was a syntax error in the AngularJS provider

answered Jul 03 '17 at 06:45

noushad mohammed

375
1
4
20

Module is not available, misspelled or forgot to load (but I didn't)

9 Answers9

Linked