Irtaza Safi Irtaza Safi - 2 years ago 84
AngularJS Question

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

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 !


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

function($scope) {


function($scope) {


myApp.config(function ($routeProvider) {
when('/home', {

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


<!DOCTYPE html>
<html ng-app = "myApp">
<title>Learning Angular JS</title>
<!-- Latest compiled and minified CSS -->
<script src = ""></script>
<script src = ""></script>
<script src = ""></script>
<script src=""></script>
<script src ="app.js"></script>
<link rel="stylesheet" href="">

<!-- jQuery library -->
<script src=""></script>

<!-- Latest compiled JavaScript -->
<script src=""></script>


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

<div ng-view></div>

Here is the error link.

angular.js:4068Uncaught Error: [$injector:modulerr]$injector/modulerr?p0=weatherApp&p1=…20(

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download