AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

Question

I am new to AngularJS and working my way through some documents and tutorials to learn. My question is in reference to Egghead's video series, this video in particular, demonstrating how to put together a basic search filter. I wanted to use this in a real app I'm building for a friend with a small candle-making business but when I modified it to be her candles rather than the Avengers cast (as demo'd in the video) I got this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:

Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify ...

I copied a redacted (only 3 cast members in the array) version of EXACTLY what is in the video demo into a jsfiddle and discovered it still yields the same error. (For reference, the Egghead demo is here: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). I've read at least a half dozen similar questions on this site so far and tried every solution offered, but none of them get rid of this error or cause the Avengers search -- which works fine in the video demo -- to actually function properly.

HTML:

<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">
        <input type="text" ng-model="search.$" />
        <table>
            <tr ng-repeat="actor in avengers.cast | filter:search">
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>
    </div>
</div>

Javascript:

var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
        name: "Robert Downey Jr.",
        character: "Tony Stark / Iron Man"
        }, 
        {
        name: "Chris Evans",
        character: "Steve Rogers / Captain America"
        },
        {
        name: "Mark Buffalo",
        character: "Bruce Banner / The Hulk"
        }
    ];
    return Avengers;
})

function AvengersCtrl($scope, Avengers) {
    $scope.avengers = Avengers;
}

Simply put, can someone offer a solution that will work and get rid of this error, as well as explain in simple English (not Ph.D. level "Angular Obscurese") what causes it (in a nutshell) and what needs to be done to avoid it?

Edit: Apologies, but the jsfiddle link referenced above from the tutorial is no longer active. I have removed the broken link. The tutorial mentioned is still available for viewing.

Try using **No Wrap - In Head** in your fiddle: http://jsfiddle.net/Q5hd6/ — Khanh TO, Mar 14 '14 at 13:44
@ExpertSystem: body or head both work in this case. I also added an explanation in my answer. — Khanh TO, Mar 14 '14 at 14:03
@ExpertSystem: one more thing, that loading option applies to our script in the script window, not the framework script. — Khanh TO, Mar 14 '14 at 14:08
@KhanhTO: I know both work, but the one is bad practice (loading it in head) the other is good practice (loading it in body). So, between two working solutions, you should not encourage the worse. — gkalpak, Mar 14 '14 at 14:21
@ExpertSystem: That's true as it will appear that the page loads faster. But in case of angular, it's more likely to display uncompiled DOM. Something like {{}} — Khanh TO, Mar 14 '14 at 14:26
@KhanhTO: And that's exactly what the ng-cloak can be used for :) — gkalpak, Mar 14 '14 at 14:31
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49758/discussion-between-expertsystem-and-khanh-to) — gkalpak, Mar 14 '14 at 14:38

Khanh TO · Accepted Answer · 2014-03-14T14:02:13.560

52

Try using No Wrap - In Head or No wrap - in body in your fiddle:

Working fiddle: http://jsfiddle.net/Q5hd6/

Explanation:

Angular begins compiling the DOM when the DOM is fully loaded. You register your code to run onLoad (onload option in fiddle) => it's too late to register your myApp module because angular begins compiling the DOM and angular sees that there is no module named myApp and throws an exception.

By using No Wrap - In Head, your code looks like this:

<head>

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>

    <script type='text/javascript'>
      //Your script.
    </script>

</head>

Your script has a chance to run before angular begins compiling the DOM and myApp module is already created when angular starts compiling the DOM.

edited Mar 14 '14 at 14:02

answered Mar 14 '14 at 13:55

Khanh TO

48,509
13
99
115

Excellent, thanks for your response. However, I am still getting an error when I attempt to develop this locally and fire it up in my browser. All that shows up is the input field, no table. Specifically I am getting two errors: -Uncaught ReferenceError: angular is not defined kandlepicker.js:1 and -Error: [$injector:unpr] http://errors.angularjs.org/1.2.14/$injector/unpr?p0=CandlesProvider%20%3C-%20Candles. What am I doing wrong? I have the script loading reference to angular just before the closing
tag as recommended and my custom script in the
section. Tried other ways, no go
– code-sushi Mar 16 '14 at 16:50
When I put both script tags together (Angular first, custom second) in either OR at the end of , I get this error still: -- Error: [$injector:unpr] http://errors.angularjs.org/1.2.14/$injector/unpr?p0=CandlesProvider%20%3C-%20Candles ----> I'm guessing from this: http://docs.angularjs.org/error/$injector/unpr -- that I have to specify a "Service". But what if I don't actually need one? Sorry if this sounds dumb, like I said I'm new to Angular. Maybe my questions will help other newbies. :) – code-sushi Mar 16 '14 at 16:55
@code-sushi: firstly, angular script must always be loaded before your custom script or an exception angular is not defined will be thrown. – Khanh TO Mar 17 '14 at 13:47
@code-sushi: your `kandlepicker.js` should be after angular. Also check if you inject a service to the controller without defining it. If you don't need that service in your controller, just remove it. – Khanh TO Mar 17 '14 at 13:51
Hi, this works in fiddle, but how do you fix the problem in an html browser? – Dirk Jun 25 '14 at 19:27
1

@Dirk: as in the code sample, you could run your script in the head right after including angular.js – Khanh TO Jun 26 '14 at 12:37

score 10 · Answer 2 · answered Mar 14 '14 at 13:45

10

You have to play with JSFiddle loading option :

set it to "No wrap - in body" instead of "onload"

Working fiddle : http://jsfiddle.net/zQv9n/1/

answered Mar 14 '14 at 13:45

Jscti

14,096
4
62
87

score 3 · Answer 3 · answered Oct 11 '16 at 09:36

3

For people having the same error with a similar code:

$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){

    });
});

Removing the $(function(){ ... }); solved the error.

answered Oct 11 '16 at 09:36

L01c

1,033
10
19

score 1 · Answer 4 · answered Oct 26 '15 at 20:38

For people who find this old posting on the web by searching for the error message, there is another possible cause of the problem.

You could just have a typo in your call to the script, even if you have already done the things described in the other excellent answer. So check to make sure you can used the right spelling in your script tags.

score 1 · Answer 5 · answered Oct 03 '17 at 15:26

1

it turns out that I got this error because my requested module is not bundled in the minification prosses due to path misspelling

so make sure that your module exists in minified js file (do search for a word within it to be sure)

answered Oct 03 '17 at 15:26

Basheer AL-MOMANI

14,473
9
96
92

score 0 · Answer 6 · answered Nov 05 '15 at 14:03

0

I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem

answered Nov 05 '15 at 14:03

Sam Joni

159
2
14

Was this in jsfiddle? The question is specifically pertaining to that, so if it is, can you please post a link to your fiddle? Thanks! – code-sushi Nov 05 '15 at 21:09
This works in jsFiddle without adding the modification I explained, I tried your code in jsfiddle and it works properly, see the code here http://jsfiddle.net/SaifHarbia/ht4jme7q/ note that you need to choose an Angular library and No Wrap- in under Frameworks and Extensions – Sam Joni Nov 08 '15 at 07:15
Well yes, you have simply repeated the first answer offered over a year and a half ago by Khanh TO, above. That was the issue -- use no-wrap. – code-sushi Nov 13 '15 at 18:25

score 0 · Answer 7 · answered Feb 14 '23 at 17:43

I know its know a 9 year old question, I was having this same error, I tried to put a js file containing AngularJS code in a directory where I also had the following files

I tried several things with no success until I just made a simple test to move outside that directory, isolating the file and that worked, I still don't know the reason. Hope this helps to someone

AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

7 Answers7

Linked