thinkster.io chapter 4 fixes - Firebase not installed, JS files not included

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.

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!

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!

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

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 -->

Was stuck on it for an entire day. Thanks!

the cdn method worked! thanks