AngularJS Unknown Provider Error (Firebase & AngularFire)

Question

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);
}]);

You need to include modules before you try to register them, i.e. include angularfire before app.js — Explosion Pills
– Explosion Pills, Commented Dec 28, 2015 at 3:53
My scripts are in the following order and I'm still receiving the error. Is there a problem with how I've listed them? Angular/AngularRoute/Firebase/AngularFire/app.js/editor.js — tjq
– tjq, Commented Dec 28, 2015 at 3:59

Quy · Accepted Answer · 2015-12-28 04:04:01Z

3

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.

edited Dec 28, 2015 at 4:04

answered Dec 28, 2015 at 3:56

Quy

3810 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tjq Over a year ago

Got it to work! Thanks a ton, I guess I must have missed something really simple. However, on my editor.html page the styling still doesn't show up even though dev tools tells me that the css file has been loaded appropriately. Is this due to any of the changes I made? I can post a fiddle if need be.

Quy Over a year ago

glad to help. A fiddle would be nice! Since thing happens on other file, I need to check it on your code

Collectives™ on Stack Overflow

AngularJS Unknown Provider Error (Firebase & AngularFire)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related