Why is this code using angular JS giving injector module error for ngRoute?

Question

Here's the app.js code. I have defined two controllers and a simple routing mechanism using ngRoute. I cannot for the life of me understand why i keep getting the injector module error on ngRoute. I am serving this code using a Node server. Note, the home.html and forecast.html files are completely empty so far.

Please help !

Thanks

var myApp = angular.module("myApp",['ngRoute','ngResource ']);

myApp.controller('homeController',['$scope',
    function($scope) {
       
    }]);


myApp.controller('forecastController',['$scope',
    function($scope) {


    }]);


myApp.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl:'home.html',
        controller:'homeController'

    }).
    when('/forecast', {
        templateUrl: 'forecast.html',
        controller: 'forecastController'
    });
});

EMPTY

<!DOCTYPE html>
<html ng-app = "myApp">
<head>
    <title>Learning Angular JS</title>
    <!-- Latest compiled and minified CSS -->
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular.min.js"></script>
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-messages.min.js"></script>
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.3.0-rc.5/angular-route.js"></script>
    <script src ="app.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"> Weather </a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">Home</a></li>
                <li><a href = "#forecast"></a> Forecast </li>
            </ul>
        </div>
    </nav>
    <div class="container">

        <div ng-view></div>
    </div>
</body>
</html>

Here is the error link.

angular.js:4068Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-rc.5/$injector/modulerr?p0=weatherApp&p1=…20(https%3A%2F%2Fcode.angularjs.org%2F1.3.0-rc.5%2Fangular.min.js%3A18%3A3)

Didn't work. I don't think it matters. I can see the source file loaded into the browser from the dev tools (chrome) so it's not that it isn't getting downloaded.. — Muhammad Safi
There is a space in your module declaration in after ngResource var myApp = angular.module("myApp",['ngRoute','ngResource ']); — Rahul Arora

charlietfl charlietfl · Accepted Answer · 2016-05-30T18:10:06

The problem is with ngResource because there is extra space in the name in your dependency array before closing quote.

Note that if you use angular development version you get a more verbose error output and stack trace in console instead of links to angular error site

var myApp = angular.module("myApp",['ngRoute','ngResource ']);
                                           //remove this ^^

Several other things to note is if you include jQuery before angular then angular.element (jQlite) will use full jQuery API internally but not if you include it after.

Also suggest removing protocol from scripts to avoid blocked content problems when browsers go to load them on http

As for bootstrap.js it is best to remove it and use angular-ui-bootstrap instead. This will also remove jQuery dependency of bootstrap.js

Why is this code using angular JS giving injector module error for ngRoute?

2 Answers