Getting error in AngularJS simple App with Firebase

Question

I am getting the following error in my AngularJS:

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=manageApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fmodulerr%3Fp0%3Dfirebase%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.8%252F%2524injector%252Fnomod%253Fp0%253Dfirebase%250AN%252F%253C%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A6%253A412%250Ake%252F%253C%252F%253C%252F%253C%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A25%253A99%250Ab%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A24%253A142%250Ake%252F%253C%252F%253C%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A24%253A385%250Ag%252F%253C%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A39%253A471%250Aq%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A7%253A353%250Ag%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A39%253A319%250Ag%252F%253C%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A39%253A488%250Aq%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A7%253A353%250Ag%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A39%253A319%250Acb%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A43%253A336%250ABc%252Fc%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A20%253A390%250ABc%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A21%253A179%250Afe%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A20%253A1%250A%2540https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.5.8%252Fangular.min.js%253A317%253A386%250An.Callbacks%252Fj%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fjquery%252F2.1.1%252Fjquery.min.js%253A2%253A26855%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fjquery%252F2.1.1%252Fjquery.min.js%253A2%253A27673%250A.ready%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fjquery%252F2.1.1%252Fjquery.min.js%253A2%253A29465%250AI%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fjquery%252F2.1.1%252Fjquery.min.js%253A2%253A29656%250A%0AN%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A6%3A412%0Ag%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A40%3A222%0Aq%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A7%3A353%0Ag%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A39%3A319%0Ag%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A39%3A488%0Aq%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A7%3A353%0Ag%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A39%3A319%0Acb%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A43%3A336%0ABc%2Fc%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A20%3A390%0ABc%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A21%3A179%0Afe%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A20%3A1%0A%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.min.js%3A317%3A386%0An.Callbacks%2Fj%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%3A2%3A26855%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%3A2%3A27673%0A.ready%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%3A2%3A29465%0AI%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%3A2%3A29656%0A

In my HTML, I have included the following:

    <html ng-app='manageApp'>
    <head>
    <script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.6.1/firebase-app.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript" src="js/manage.js"></script>
    ::::   :::::: ::::::::::::  ::::::::
    ::::   :::::: ::::::::::::  ::::::::

        <div ng-controller="ManageCtrl">
    ::::   :::::: ::::::::::::  ::::::::
    ::::   :::::: ::::::::::::  ::::::::
<script>
  // Initialize Firebase
  var config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXXXXXXX.firebaseio.com",
    storageBucket: "XXXXXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "NNNNNNNNNNNNNNN"
  };
  firebase.initializeApp(config);
</script>

and following is the Javascript:

'use strict';
var app = angular.module('manageApp', ['firebase']);
app.controller('ManageCtrl', ['$scope', function($scope) {
    console.log("In Manage Controller");
}]);

I have worked with angularJS and Firebase. But this time I am not able to find out why it is not working. I am thinking that there is some error due to Firebase not being injected, or is it order of the libraries, or may be a typo that I am missing. I have rechecked it still not sure why I am getting this error. Or, is it because of jQuery. I have searched internet and found we should not use jQuery and AngularJS together. Any suggestions. Thanks!

Instead of importing all the scripts inside <head>, try putting it into <body> tag. — Manish Singh
– Manish Singh, Commented Nov 24, 2016 at 4:53
Thanks! I added the scripts to <body> tag - at the top and at the bottom, still does not work. — Amresh Kadian
– Amresh Kadian, Commented Nov 24, 2016 at 5:12
Will you please put full source code, so that i can help because it seems clear that everything fine in current code? — Manish Singh
– Manish Singh, Commented Nov 24, 2016 at 5:21
The code does not do anything, or much. I noticed that this error comes when I add 'firebase' in below code. Otherwise the console message gets printed. 'use strict'; var app = angular.module('manageApp', ['firebase']); app.controller('ManageCtrl', ['$scope', function($scope) { console.log("In Manage Controller");}]); — Amresh Kadian
– Amresh Kadian, Commented Nov 24, 2016 at 5:41

Amresh Kadian · Accepted Answer · 2016-11-24 05:53:10Z

1

Finally I am able to solve. The should be in following order:

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>

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

So AngularJS comes above Firebase. Thanks!!

answered Nov 24, 2016 at 5:53

Amresh Kadian

1891 gold badge2 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Getting error in AngularJS simple App with Firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related