Skip to content

Instantly share code, notes, and snippets.

@jbinto

jbinto/gist:9663989

Created March 20, 2014 13:43
Show Gist options
  • Save jbinto/9663989 to your computer and use it in GitHub Desktop.
Save jbinto/9663989 to your computer and use it in GitHub Desktop.
Download ZIP
thinkster.io chapter 4 fixes - Firebase not installed, JS files not included
Raw
gistfile1.md

While walking through Thinkster.io's AngularJS tutorial chapter 4 (Three-way data binding with a real-time server), I encountered some problems.

The tutorial advises us to:

  • run bower install angularfire --save
  • add firebase to the list of required modules
  • add a constant FIREBASE_URL to our app

After implementing the posts functionality, I tried it in the browser and got the following error (in Chrome console):

Uncaught Error: [$injector:modulerr] Failed to instantiate module angNewsApp due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the mo...<omitted>...1)

Some Googling led me to realize I need to include angularfire.js in my index.html, which was absent:

<!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    ... snip ...
    <script src="bower_components/angularfire/angularfire.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

This wasn't enough either, the error in Chrome:

Uncaught ReferenceError: Firebase is not defined angularfire.js:20
Error: [$injector:unpr] Unknown provider: $firebaseProvider <- $firebase <- Post
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=NaNirebaseProvider%20%3C-%20%24firebase%20%3C-%20Post
    at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
    at http://127.0.0.1:9000/bower_components/angular/angular.js:3538:19
    at Object.getService [as get] (http://127.0.0.1:9000/bower_components/angular/angular.js:3665:39)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:3543:45
    at getService (http://127.0.0.1:9000/bower_components/angular/angular.js:3665:39)
    at Object.invoke (http://127.0.0.1:9000/bower_components/angular/angular.js:3687:13)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:3544:37
    at getService (http://127.0.0.1:9000/bower_components/angular/angular.js:3665:39)
    at invoke (http://127.0.0.1:9000/bower_components/angular/angular.js:3687:13)
    at Object.instantiate (http://127.0.0.1:9000/bower_components/angular/angular.js:3708:23)

Finally, I fixed it by doing the following:

bower install firebase --save

This magically added the following to the scripts collection in my index.html:

<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>

I removed the second script and all is working well now.

I'm not sure whether the thinkster.io instructions are incomplete, or whether installing angularfire is supposed to implicitly bring in firebase and isn't doing so for some reason.

@kylelix7
Copy link

Hi, I had the same issue. and I found that I ran the command in a wrong directory. You have to run it in ang-news dir which contains bower.json. In this way, firebase can be installed successfully.

Running in wrong dir
rookiebird@Nest:~/workspace/ang-news/app > bower install firebase --save
bower firebase#* cached git://github.com/firebase/firebase-bower.git#1.0.11
bower firebase#* validate 1.0.11 against git://github.com/firebase/firebase-bower.git#*
bower no-json No bower.json file to save to, use bower init to create one <------ This is the error

Running in ang-news
rookiebird@Nest:~/workspace/ang-news > bower install angularfire --save
bower angularfire#* cached git://github.com/firebase/angularFire.git#0.7.1
bower angularfire#* validate 0.7.1 against git://github.com/firebase/angularFire.git#*
bower angular#~1.2.0 cached git://github.com/angular/bower-angular.git#1.2.16
bower angular#~1.2.0 validate 1.2.16 against git://github.com/angular/bower-angular.git#~1.2.0
bower firebase#~1.0.5 cached git://github.com/firebase/firebase-bower.git#1.0.11
bower firebase#~1.0.5 validate 1.0.11 against git://github.com/firebase/firebase-bower.git#~1.0.5
bower firebase-simple-login#~1.3.0 cached git://github.com/firebase/firebase-simple-login.git#1.3.2
bower firebase-simple-login#~1.3.0 validate 1.3.2 against git://github.com/firebase/firebase-simple-login.git#~1.3.0
bower angularfire#~0.7.1 install angularfire#0.7.1
bower firebase#~1.0.5 install firebase#1.0.11
bower firebase-simple-login#~1.3.0 install firebase-simple-login#1.3.2

angularfire#0.7.1 app/bower_components/angularfire
├── angular#1.2.15
├── firebase#1.0.11
└── firebase-simple-login#1.3.2

@bezreyhan
Copy link

I'm running the command in the right directory but am still getting this issue. Not sure what to do.

Any ideas?

I seem to have the right build:

admins-MacBook-4:angular_Tutorial admin$ bower install angularfire
bower cached git://github.com/firebase/angularFire.git#0.7.1
bower validate 0.7.1 against git://github.com/firebase/angularFire.git#~0.7.1
bower cached git://github.com/firebase/angularFire.git#0.7.1
bower validate 0.7.1 against git://github.com/firebase/angularFire.git#*
bower cached git://github.com/firebase/firebase-bower.git#1.0.14
bower validate 1.0.14 against git://github.com/firebase/firebase-bower.git#~1.0.5
bower cached git://github.com/firebase/firebase-simple-login.git#1.3.2
bower validate 1.3.2 against git://github.com/firebase/firebase-simple-login.git#~1.3.0
bower cached git://github.com/angular/bower-angular.git#1.2.16
bower validate 1.2.16 against git://github.com/angular/bower-angular.git#~1.2.0
bower install angularfire#0.7.1
bower install firebase#1.0.14
bower install firebase-simple-login#1.3.2

angularfire#0.7.1 app/bower_components/angularfire
├── angular#1.2.6
├── firebase#1.0.14
└── firebase-simple-login#1.3.2

<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/posts.js"></script>
    <script type="text/javascript" src="scripts/services/post.js"></script>
    <!-- endbuild -->

Thanks in advance!

@confusionprevails
Copy link

I think the sequence of scripts is the issue. I modified the sequence to be -

<script src="bower_components/firebase/firebase.js"></script> 
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="bower_components/angularfire/angularfire.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>

<script src="scripts/app.js"></script>
<script src="scripts/services/post.js"></script>
<script src="scripts/controllers/posts.js"></script>

This worked for me!

@guyroutledge
Copy link

This gist just saved me a lot of head scratching! Thanks very much :)

Copy link

ghost commented Aug 29, 2014

I got it to work by adding the CDN links

<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>

to the bower script section of my index.html like so

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

@sushcha
Copy link

sushcha commented Sep 10, 2014

Was stuck on it for an entire day. Thanks!

@cengkuru
Copy link

the cdn method worked! thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment