CODEWITHSUNDEEP
javascripthtmlangularjsfirebaseangularfire
tjq
tjq

Reputation: 55

AngularJS Unknown Provider Error (Firebase & AngularFire)

I've been building an app using Angular and Firebase and it was working until I decided to change directories and build it again from scratch to fix some compatibility issues (using bootstrap). Now when I try to go to my URL I get the following error:

Error: [$injector:unpr] Unknown provider: $firebaseArrayProvider <- $firebaseArray

I've search through similar questions and have not found any answers that solve my problem. I've tried installing Angular through bower and by linking, as well as linking to older versions of AngularFire.js and Firebase.js. Below is the code for each of the files involved.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <link rel="icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/dirty-soda.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script src="http://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="http://code.angularjs.org/1.4.8/angular-route.js"></script>
<head>
</head>
<body>
    <div ng-view></div>
    <script src="app.js"></script>
    <script src="editor/editor.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="angularfire.min.js"></script>
    <script src="../src/ace.js"></script>
</body>
</html>

app.js

'use strict';
angular.module('myApp', [
  'ngRoute',
  'myApp.editor'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: 'app/editor'});
}]);

editor.js

angular.module('myApp.editor', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/editor', {
        templateUrl: 'editor/editor.html',
        controller: 'SnippetCtrl'
    });
}])

.controller('SnippetCtrl', ['$scope','$firebaseArray','CommonProp', function($scope,$firebaseArray,CommonProp) {
    $scope.username = CommonProp.getUser();
    var firebaseObj = new Firebase("<Firebase URL>");
    $scope.snippets = $firebaseArray(firebaseObj);
}]);

Upvotes: 3

Views: 1062

Answers (1)

Quy
Quy

Reputation: 38

You forgot to include new module "firebase" in app.js

app.js

angular.module('myApp', [
  'ngRoute',
  'myApp.editor',
  'firebase'
]).

Edit:

Include the answer from @Explosion Pills:

In index.html, you also should move your script src="app.js" to the last line in order to load all required js files first before registering them.

Upvotes: 3

Related Questions