Angular.js: Uncaught error, no module: myapp

All we need is an easy explanation of the problem, so here it is.

I’m trying too bootstrap an angular.js project. This is my index.html:

<!doctype html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <base href="{% url 'app' %}" rel="nofollow noreferrer noopener" />

    <title>Project</title>
</head>
<body>
    <div ng-view>
        <p>Loading...</p>
    </div>

    <script>
        var url = function(path) { return '{{ STATIC_URL }}' + path };
    </script>
    <script src="{{ STATIC_URL }}js/jquery-1.10.1.js"></script>
    <script src="{{ STATIC_URL }}js/angular.js"></script>
    <script src="{{ STATIC_URL }}js/project/app.js"></script>
    <script src="{{ STATIC_URL }}js/project/controllers.js"></script>
</body>
</html>

The url 'app' on the head simply prints the subpath, /app, for example. This is my app.js:

'use strict';

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

app.config(['$routeProvider', function($router) {
    $router.when('/', {
        templateUrl: url('partials/foo.html'),
        controller: controllers.Foo
    });
}]);

The problem is that everytime I try to run it, an exception is raised: Uncaught Error: No module: myapp, and this is almost the same way angular-seed works. I searched on Google and StackOverflow but none of the answers (one and two) helped me.

Here’s a fiddle about my error (you should open the browser’s console to see it). What’s going wrong?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The order of your script is very important, try putting it in your <head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    var app = angular.module('myapp', []);

    app.controller('Ctrl', function($scope){
        $scope.variable = "Hello";
    });
</script>
<body ng-app="myapp">
    <div ng-controller="Ctrl">
        <p>{{variable}}</p>
    </div>    
</body>

Try it here:

http://jsfiddle.net/vvfnN/2/

Method 2

Complementing AlexCheuk‘s answer, I realized that my app.js file was involved in a closure:

(function($) {
    'use strict';

    // all angular.js stuff
)(jQuery);

Removing the closure it worked (without changing the orders as Alex said)! I don’t know exacly why, but that’s ok.

Method 3

I face the same problem but none of the above trick worked for me but this one, see the setting in image

Change from “OnLoad” to “No wrap – “

enter image description here

Method 4

In my case when using IIFE notation I forgot self invoke parentheses.

(function () {
     angular.module("adminApp", []); 
}() //don't forget self invoke parentheses
);  

Method 5

i was facing the same error but i was doing a silly mistake, i was not including the controller.js file in my jsp page.
just included this:

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/controller.js"></script>

and it worked excellently.

Method 6

I ran into a similar issue where there, while running Yeoman/grunt server.
What fixed it for me, was restarting the grunt server.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply