I've been working on a project for a class and I am getting The [$injector:nomod] error even after declaring a module.js file. I'm still new to angular, I still went and checked all the other questions that had the same problem as me but non of them answered/worked for my problem. Here is my code, please help.
Error:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at categories.component.js:4
at categories.component.js:12
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at items.component.js:4
at items.component.js:12
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at routes.js:4
at routes.js:25
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=MenuAppX&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Fnomod%3Fp0%3DMenuAppX%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A290%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20gb%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A46%3A251)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A332)
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at gb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at xe (angular.min.js:21)
at angular.min.js:333
at HTMLDocument.b (angular.min.js:38)
Index
<!DOCTYPE html>
<html ng-app="MenuAppX">
<head>
<meta charset="utf-8">
<title>Menu App</title>
</head>
<body>
<h1>Welcome to the Chinese Menu Website</h1>
<ui-view></ui-view>
<!-- Libraries -->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<!-- Modules -->
<script src="src/MenuApp/menuapp.module.js"></script>
<script src="src/MenuApp/data.module.js"></script>
<!-- 'menuapp' modules artifacts -->
<script src="src/MenuApp/menudata.service.js"></script>
<script src="src/MenuApp/categories.component.js"></script>
<script src="src/MenuApp/items.component.js"></script>
<!-- Routes -->
<script src="src/routes.js"></script>
menuapp module
(function () {
'use strict';
angular.module('MenuAppX', ['data']);
});
data module
(function () {
'use strict';
angular.module('data', ['MenuDataService'])
});
menuapp service
(function () {
'use strict'
angular.module('MenuAppX')
.service('MenuDataService', MenuDataService);
MenuDataService.$inject = ['$http'];
MenuDataService = function($http) {
var service = this;
// var categoryPromise = service.getAllCategory();
// var itemPromise = service.getItemsForCategory();
// get later
service.getAllCategory = function() {
var deferred = $q.defer();
var categoriesResult = $http({
method: "GET",
url: ('https://davids-restaurant.herokuapp.com/categories.json'),
});
deferred.resolve(categoriesResult);
}
service.getItemsForCategory = function(categoryShortName) {
var deferred = $q.defer();
var itemsResult = $http({
method: "GET",
url: (' https://davids-restaurant.herokuapp.com/menu_items.json?category='),
params: {
category: categoryShortName
}
});
deferred.resolve(itemsResult);
}
};
});
categories component
(function () {
'use strict';
angular.module('MenuAppX')
.component('categoriesX', {
templateUrl: 'src/MenuApp/template/categories.template.html',
bindings: {
categoriesR: '<'
}
});
})();
items component
(function () {
'use strict';
angular.module('MenuAppX')
.component('categoriesX', {
templateUrl: 'src/MenuApp/template/categories.template.html',
bindings: {
categoriesR: '<'
}
});
})();
routes
(function () {
'use strict';
angular.module('MenuAppX')
.config(RoutesConfig);
RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'src/MenuApp/template/home.template.html'
})
.state('category', {
url: '/menuCategory',
templateUrl: 'src/MenuApp/template/categories.template.html'
})
.state('items', {
url: '/menuItems',
templateUrl: 'src/MenuApp/template/items.template.html'
})
}
})();
You need to load data module first inorder to load the MenuAppX module because its a dependency, change your order of references as
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<!-- Modules -->
<script src="src/MenuApp/data.module.js"></script>
<script src="src/MenuApp/menuapp.module.js"></script>
<!-- 'menuapp' modules artifacts -->
<script src="src/MenuApp/menudata.service.js"></script>
<script src="src/MenuApp/categories.component.js"></script>
<script src="src/MenuApp/items.component.js"></script>
<!-- Routes -->
<script src="src/routes.js"></script>
Related
I am trying to display the username "bacon" whenever the user clicks on the button "home" using a vm(view model) in order to transfer the object user which contains the property userName but I get the following error.
app.js:1 Uncaught SyntaxError: Unexpected token <
index.controller.js:1 Uncaught SyntaxError: Unexpected token <
The project has the following hierarchy:
Here is my index.html located at the parent folder ./app
<!DOCTYPE html>
<html>
<head>
<title>MEAN Stack User Registration and Login Example Application</title>
</head>
<body class="container">
<!-- header -->
<header>
<ul class="nav nav-tabs">
<li ng-class="{active: activeTab === 'home'}"><a ui-sref="home">Home</a></li>
</ul>
<div class="flash-message" ng-if="flash">
<div class="{{'alert alert-' + flash.type}}" ng-bind="flash.message"></div>
</div>
</header>
<!-- main -->
<main ui-view></main>
<!-- footer -->
<footer></footer>
<!-- external scripts -->
<!-- application scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="home/index.controller.js"></script>
<!--<script src="app-services/user.service.js"></script>
<script src="app-services/flash.service.js"></script>-->
<!-- <script src="account/index.controller.js"></script>-->
</body>
</html>
Here is my app.js located at the parent folder ./app
(function () {
'use strict';
angular
.module('app', ['ui.router'])
.config(config)
.run(run);
function config($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home/index.html',
controller: 'Home.IndexController',
controllerAs: 'vm',
data: { activeTab: 'home' }
})
}
function run($http, $rootScope, $window) {
// add JWT token as default auth header
$http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;
// update active tab on state change
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
$rootScope.activeTab = toState.data.activeTab;
});
}
// manually bootstrap angular after the JWT token is retrieved from the server
$(function () {
// get JWT token from server
$.get('/app/token', function (token) {
window.jwtToken = token;
angular.bootstrap(document, ['app']);
});
});
})();
Here is my index.html located at the folder ./app/home
<h1>Hi {{vm.user.firstName}}!!</h1>
Here is my index.controller.js located at the folder ./app/home
(function () {
'use strict';
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller() {
var vm = this;
vm.user = null;
initController();
function initController() {
var user;
user.firstName = "bacon";
vm.user = user;
// get current user
//UserService.GetCurrent().then(function (user) {
// vm.user = user;
//});
}
}
})();
I have just started out attempting to use Webpack to bundle my Angular App. When I have included the essentials I am getting the following error
Argument 'fn' is not a function, got string
I think it's something to do with Angular-Route, but I can't find anything I can see what would be wrong.
My stripped down files are as follows:
./index.html
<!DOCTYPE html>
<html lang="en" ng-app="crewGui">
<head>
<title>GUI</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/stylesheets/styles.css">
<script src="js/dist/vendor.bundle.js"></script>
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<script src="bower_components/angular-busy/dist/angular-busy.min.js"></script>
<script src="js/dist/app.bundle.js"></script>
</head>
<body class="container-fluid">
<header class="row">
<div class="logo col-xs-6">
<img src="images/logo_alt.png" class="img-responsive" alt"logo">
</div>
</header>
<div id="content">
<div class="container-fluid">
<ng-view></ng-view>
</div>
</div>
<footer class="row">
<div class="copyright col-xs-12">©</div>
</footer>
</body>
</html>
./module.js
'use strict';
var angular = require('angular');
var ngRoute = require('angular-route');
angular
.module('crewGui', [
'ngRoute'
]
);
require('./');
require('./services');
require('./controllers');
./index.js
'use strict';
var angular = require('angular');
var ngRoute = require('angular-route');
angular
.module('crewGui')
.config('Config', require('./config'))
.run('Run', require('./run'));
./run.js
'use strict';
Run.$inject = ['$http'];
function Run($http) {
$http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$http.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT';
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
$http.defaults.headers.common['Accept'] = 'application/json';
$http.defaults.headers.common.Authorization = "Basic AWORKINGAPIKEY";
};
module.exports = Run;
./config.js
'use strict';
Config.$inject = ['$routeProvider'];
function Config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/dashboard.html',
controller: 'DashboardController',
controllerAs: 'dashboard'
})
.otherwise({
redirectTo: '/'
});
};
module.exports = Config;
./services/index.js
'use strict';
var angular = require('angular');
var ngRoute = require('angular-route');
angular
.module('crewGui')
.service('GetData', require('./get_data_service'));
./services/get_data_service.js
'use strict';
GetData.$inject = ['$http'];
function GetData($http) {
var self = this;
self.getData = function() {
return $http.get("https://aworkingurl")
.success(function (data, status, headers, config) {
return data;
})
.error (function (data, status, headers, config) {
return status;
});
};
};
module.exports = GetData;
./controllers/index.js
'use strict';
var angular = require('angular');
var ngRoute = require('angular-route');
angular
.module('crewGui')
.controller('DashboardController', require('./controller_dashboard'));
./controllers/controller_dashboard.js
'use strict';
DashboardController.$inject = ['$scope', 'GetData'];
function DashboardController($scope, GetData) {
var self = this;
GetData.getData()
.then(function(data){
self.flightData = data.data;
});
};
module.exports = DashboardController;
Any constructive help would be much appreciated. Please let me know if there;'s anything else you need. And i probably don't need to be requiring ngRoute all over the place. Clutching at straws at this point.
Many thanks.
In index.js try removing 'Config' and 'Run' so the lines look like this:
.config(require('./config'))
.run(require('./run'));
The error was suggesting that the first argument needs to be a function instead of a string :)
For everyone who comes here looking for a solution to the error, please check your global variables in the console, and the name of your remotes for collision. For us, the problem was that we called our remote navigator, but in the global context, there was already a variable defined with that name.
Error only if minimized and loaded in same file.
If app.ts is loaded before Service or Directive it works.
(No problems with controllers)
How can i make it work?
Console Error:
site.js:119 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20routeNavigation%20%3C-%20navigationDirective
at Error (native)
at http://localhost:50308/js/site.js:11:416
at http://localhost:50308/js/site.js:48:7
at Object.d [as get] (http://localhost:50308/js/site.js:45:270)
at http://localhost:50308/js/site.js:48:69
at d (http://localhost:50308/js/site.js:45:270)
at e (http://localhost:50308/js/site.js:46:1)
at Object.invoke (http://localhost:50308/js/site.js:46:86)
at Object.$get (http://localhost:50308/js/site.js:43:460)
at Object.invoke (http://localhost:50308/js/site.js:46:295)(anonymous function) # site.js:119
AngularJs Error Message:
Unknown provider: eProvider <- e <- routeNavigation <- navigationDirective
app.ts
enter code here
"use strict";
var app = angular.module('HouseConcertApp', ['ngCookies', 'pascalprecht.translate', 'ngRoute', 'houseconcertControllers', 'houseconcertServices', 'houseconcertDirectives']);
app.config([
'$translateProvider', '$routeProvider', function($translateProvider, $routeProvider) { ....
services.ts
var houseconcertServices = angular.module('houseconcertServices', []);
houseconcertServices.factory('routeNavigation', function ($route, $location) {
var routes = [];
angular.forEach($route.routes, function (route, path) {
if (route.name) {
routes.push({
path: path,
name: route.name
});
}
});
return {
routes: routes,
activeRoute: function (route) {
return route.path === $location.path();
}
};
});
directives.ts
var houseconcertDirectives = angular.module("houseconcertDirectives", []);
houseconcertDirectives.directive('navigation', ['routeNavigation', routeNavigation => ({
restrict: "E",
templateUrl: "navigation-directive-tpl.html",
controller($scope) {
$scope.routes = routeNavigation.routes;
$scope.activeRoute = routeNavigation.activeRoute;
}
})]);
index.html
<!doctype html>
<html ng-app="HouseConcertApp">
<head>
<base href="/index.html">
<title>House Concert</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/Main.css"/>
<script src="js/site.js" onload="Hc.Common.initialize()"></script>
</head>
<body>
<navigation></navigation>
<div ng-controller="HouseConcertCtrl">
<div ng-view></div>
</div>
</div>
</body>
</html>
it works if html head script includes like this:
but not if all in this order minimized in site.js (with gulp)
<script src="pathToFolder/app.ts"></script>
<script src="pathToFolder/services.ts"></script>
<script src="pathToFolder/controllers.ts"></script>
<script src="pathToFolder/directives.ts"></script>
To get files minified without error you should make sure to follow Dependency Injection pattern consistently. Only routeNavigation factory code is missing DI Inline Array annotation in your code.
Change below
houseconcertServices.factory('routeNavigation', function ($route, $location) {
to
houseconcertServices.factory('routeNavigation',['$route', '$location',
function ($route, $location) {
//service code will be as is.
}]);
Doc link for minification related warning
I can't seem to figure how to inject multiple services into a controller.
I have listed my files here:
index.html file:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/app.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/services/questionsdata.js'></script>
<script src='./app/services/getsong.js'></script>
console.log error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=getsongProvider%20%3C-%20getsong%20%3C-%20QuestionsCtrl
at Error (native)
at http://localhost:8000/static/angular/angular.min.js:6:416
at http://localhost:8000/static/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:8000/static/angular/angular.min.js:40:270)
at http://localhost:8000/static/angular/angular.min.js:43:69
at d (http://localhost:8000/static/angular/angular.min.js:40:270)
at e (http://localhost:8000/static/angular/angular.min.js:41:1)
at Object.instantiate (http://localhost:8000/static/angular/angular.min.js:41:364)
at http://localhost:8000/static/angular/angular.min.js:87:42
at link (http://localhost:8000/static/angular-route/angular-route.js:977:26) <section class="container-fluid ng-scope" id="main" ng-view="">
My app.js file:
(function(){
'use strict';
angular.module('myApp', ['ngRoute', 'myApp.welcome', 'myApp.questions' ])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/welcome'
})
.when('/welcome', {
templateUrl: 'static/app/welcome/welcome.html',
controller: 'WelcomeCtrl'
})
.when('/questions', {
//templateUrl: 'static/app/questions/questions.html',
templateUrl: 'static/app/views/questions.html',
//controllerAs: 'question',
controller: 'QuestionsCtrl'
})
.otherwise('/')
});
})();
My controller file:
(function () {
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata,getsong) {
var vm = this;
var data = {
params: "1,1"
};
....
My questionsdata (first service) file:
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('questionsdata', questionsdata);
function questionsdata() {
var service = {
getQuestions: getQuestions
};
return service;
.....
My get song (second service) file
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('getsong',getsong);
function getsong($http, $window, $interval) {
var service = {
getId: getId,
getMySong: getMySong
};
return service;
....
That's ain't working.
When I change my controller file to use only the questionsdata service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata) {
It's working well. But when trying to use only the get song service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(getsong) {
It ain't working as well.
Weird, right? What am I missing?
Try using the inject method:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
QuestionCtrl.$inject = ['getsong', 'questiondata'];
function QuestionCtrl(getsong, questiondata){
Try this in index.html:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/app.js'></script>
<script src='./app/services/getsong.js'></script>
<script src='./app/services/questionsdata.js'></script>
Because myApp depends on myApp.welcome and myApp.questions, so you have to put them first.
I'm trying to learn Angular and hitting a brick wall trying to add routes to my application.
I keep getting presented this error
'modulerr', "Failed to instantiate module
From other stackoverflow questions i gather its not from loading ngRoute correctly but angular-route.js is loaded in the head, and ngRoute is declared in my module construct so i'm a bit confused
My index file is as followed
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="pgpChatApp">
<div class="view-container">
<div ng-view="" class="view-frame"></div>
</div>
</body>
</html>
My app file
'use strict';
var pgpChatApp = angular.module('pgpChatApp', [
'ngRoute',
'firebase',
'pgpChatAnimations',
'pgpChatControllers',
'pgpChatFilters',
'pgpChatServices'
]);
pgpChatApp.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/home", {
// the rest is the same for ui-router and ngRoute...
controller: "userAuth",
templateUrl: "partials/home.html"
}).when("/account", {
// the rest is the same for ui-router and ngRoute...
controller: "AccountCtrl",
templateUrl: "partials/msg_room.html",
resolve: {
// controller will not be loaded until $requireAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth", function (Auth) {
// $requireAuth returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireAuth();
}]
}
});
}]);
My controller file
var pgpChatAppControllers = angular.module('pgpChatAppControllers', []);
pgpChatAppControllers.controller("userAuth", ["$scope", "$routeParams", "Auth",
function ($scope, $routeParams, Auth) {
$scope.createUser = function () {
$scope.message = null;
$scope.error = null;
Auth.$createUser({
email: $scope.email,
password: $scope.password
}).then(function (userData) {
$scope.message = "User created with uid: " + userData.uid;
}).catch(function (error) {
$scope.error = error;
});
};
$scope.removeUser = function () {
$scope.message = null;
$scope.error = null;
Auth.$removeUser({
email: $scope.email,
password: $scope.password
}).then(function () {
$scope.message = "User removed";
}).catch(function (error) {
$scope.error = error;
});
};
}]);
Has anyone got an idea what the fix is?
Thanks in advanced
[EDIT]
Full exception message
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=pgpChatAnimations&p1=Error: [$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=pgpChatAnimations
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:412
at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:53)
at w.bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:21:296)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:35:116
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:34:399)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:35:63
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:302)"
The url for angular-route is not working. Try using:
http://code.angularjs.org/1.2.0-rc.3/angular-route.js
I guess i my module names still weren't matching the defined modules in app.js
This diff shows the fix
https://github.com/jkirkby91/angular-firebase-chat/commit/35be74592197d16435adb322f0e24963108ed97a