Sneha Lohar Sneha Lohar - 1 month ago 17
AngularJS Question

Injector Error while trying to configure angularfire

Currently my index.html has the following setup. The javascript file (js/app.js) is as follows:

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

app.controller('RootCtrl', function($scope, $firebaseObject) {
var ref = firebase.database().ref();
$scope.data = $firebaseObject(ref);
});

app.controller('HomeCtrl', function($scope, $firebaseObject) {
var ref = firebase.database().ref();
$scope.data = $firebaseObject(ref);
$scope.pageName = 'Home';
});

app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}).when('/location/:locId', {
templateUrl: 'location.html',
controller: 'LocationCtrl'
}).otherwise({
redirectTo: '/'
});
});


The HTML File:

<html>

<head>
<title>Firebase App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>


<!-- Firebase Libraries -->
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-storage.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "___",
authDomain: "___.firebaseapp.com",
databaseURL: "https://___.firebaseio.com",
storageBucket: "___.appspot.com",
messagingSenderId: "___"
};
firebase.initializeApp(config);
</script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>

<body ng-app="app" ng-controller="RootCtrl">
<div ng-view>
</div>
</body>

</html>


Running this gives the following error:

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A43%3A336)(…)


Not sure of what is going wrong. Additionally did some debug to notice that this failure is caused when trying to inject
firebase
module.

Answer

Based on your comment in another answer and your script:

The problem is with your app.js script. When you minify your script, your variables will get renamed, in this case, $routeProvider will become somthing like e and angular will no longer be able to inject. Change your config call to:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  }).when('/location/:locId', {
    templateUrl: 'location.html',
    controller: 'LocationCtrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);

Also, make similar changes to your controller. Let me know if this works.