Angular JS Error: $injector:nomod Module Unavailable during routing

Question

So, I am really new to angular JS and I'm working on a project for a company with a team from my school as an internship. I have to get the routing working first though, and it just will not work no matter what I have tried. I tried it with angular JS 1.0.7 and with that I could get it to work, but with the newest version (1.5.7) I just can't after many many hours of trying. This is the error the console currently gives me:

Error: $injector:nomod Module Unavailable Module 'app' 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. The error originates from the line in index.html as far as I know, since the error disappears if i remove it, but the routing doesn't work then either.

I'd really appreciate any help with this. I know I probably missed something incredibly basic (and the code is probably pretty sloppy), but I just can't figure it out. Oh and by the way, I tried putting the content from app.js to index .html inside script tags and then it didn't give the error, but didn't display anything either, really weird. I have also tried many different ways to do routing as instructed by different tutorials or guides, but I still can't get it to work.

Code: Index.html (modified so as to not give way the name of the company etc.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <script src="js/angular.min.js"></script>
  <script src="js/angular-resource.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/ui-bootstrap-1.3.3.min.js"></script> 
  <script src="js/angular-animate.min.js"></script>
  <script src="js/angular-touch.min.js"></script>
  <script src="app/app.js"></script>
  <script src="app/ctrl.js"></script>
  <script src="scripts/routing.js"></script>

</head>
<body>
<div class="navbar navbar-default" id="navbar">
  <div class="container" id="navbar-container">
    <div class="navbar-header">
      <a href="" class="navbar-brand">
        <small>
          <i class="glyphicon glyphicon-log-out"></i>
          Products and Company Info
        </small>
      </a><!-- /.brand -->

    </div><!-- /.navbar-header -->
    <div class="navbar-header pull-right" role="navigation">
      <a href="#howto" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Howto</a>
      <a href="#" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-home"></i>&nbsp;Home</a>
    </div>
  </div><!-- /.navbar-container -->
</div><!-- /.navbar -->

<div>
  <div class="container">
   <div ng-app="app">
    <h2>App name</h2>
    <br/>
    <div ng-view></div>
   </div>
  </div><!-- /.container -->
</div>


</body>
</html>

Code app.js:

var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
app.run(function($rootScope) {

});

Code ctrl.js

app.controller("mainCtrl", function($scope) {
    $scope.firstName = "first name";
    $scope.lastName = "last name";
});

app.controller('howtoCtrl', function($scope) {
    $scope.message = 'How To guide here';   
});

Code routing.js:

// configure our routes
    app.config(function($routeProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'mainCtrl'
        })

        // route for the how to page
        .when('/howto', {
            templateUrl : 'howto.html',
            controller  : 'howtoCtrl'
        })

        // route for the test2 page
        .when('/testi2', {
            templateUrl : 'test2.html',
            controller  : 'test2Controller'
        });
    });

Edit: After changing ng-app="app" to ng-app="mainApp", I got the following errors

Final Edit: Thanks guys, it works now. The problem was first that ng-app="app" should have been ng-app"mainApp", and I forgot to include the folder to the address of the tempaltes in routing.js after I had originally moved the files to their own folder.

I tried that with and without the ng-app="mainApp inside the div tag also, didn't work. Same errors as in the edit in the main post. — HenriM
– HenriM, Commented Jul 5, 2016 at 10:11
try removing ng-app from the div, and just keep one ng-app="mainApp" in html tag, you can just have one ng-app in one html. — Dev1ce
– Dev1ce, Commented Jul 5, 2016 at 10:16

JulCh · Accepted Answer · 2016-07-05 10:00:40Z

1

You call in your html <div ng-app="app"> but your app is named mainApp. Try to change <div ng-app="app"> to <div ng-app="mainApp">

answered Jul 5, 2016 at 10:00

JulCh

2,8982 gold badges21 silver badges21 bronze badges

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

3 Comments

HenriM Over a year ago

Weird, last time I tried that it changed nothing except that the error went away (but nothing worked either) this time I got the following errors by changing that:

JulCh Over a year ago

After looking at your error, it seems that the app just can't find your home.html in the folder /var/www/html/byow_routing_sahlays_2/byow/. Are you sure that home.html is here ? If it can't find it, it can't compile template and render it in ng-view.

HenriM Over a year ago

Aaah, of course! I forgot to put the templates folder in front of the address for the templates in routing.js It works now so far. I knew it would be some stupid oversight. Thanks to anyone that helped

Varit J Patel · Accepted Answer · 2016-07-05 09:57:10Z

0

Add below code to the very first line of ctrl.js and routing.js

var app = angular.module('mainApp');

cheers!

answered Jul 5, 2016 at 9:57

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular JS Error: $injector:nomod Module Unavailable during routing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related