AngularFire 2 Updates

As I warned in the book about “everything in beta” (a phrase my friend Leif Wells loves to quote), some recent updates to AngularFire 2 impact the To Do application in my book.The reason behind these changes is by breaking AngularFire into smaller modules, your app will load and run faster (always a good thing). For example, if you don’t need the user auth module in AngularFire, no need to load it.

There are just a few minor changes, so let get started…

First, make sure you have installed the latest versions of AngularFire2 and Firebase. Check your package.json and check the version numbers:

"angularfire2": "^4.0.0-rc.0",
"firebase": "^3.9.0"
If you are referencing an older version, update the version numbers and update your node modules.
Next, in the app.module.ts file you need to now import this additional module:
import { AngularFireDatabaseModule } from 'angularfire2/database';

and then include it within the imports array:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule
]
The tasklist.ts file will also need two changes. The first is to change
import { AngularFire, FirebaseListObservable } from 'angularfire2';

to

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

The AngularFire variable will need to be typed to AngularFireDatabase.

constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dialogs: Dialogs) {...}

Finally, our reference to the data is now just:

this.tasks = af.list('/tasks');

And with that, your Ionic2Do app will run with the latest AngularFire.

Advertisements

11 comments

  1. Hi I’m a beginner working through the book.In tasklist.ts I have

    tasks: FirebaseListObservable = [];

    and I get

    Type ‘undefined[]’ is not assignable to type ‘FirebaseListObservable’. Property ‘$ref’ is missing in type ‘undefined[]’.

    I presume once I get this right it will cure

    Property ‘splice’ does not exist on type ‘FirebaseListObservable’.

    what should the tasks declaration look like?

    Great book . – the changing versions don’t make it easy – but it does ‘help’ you learn

    Cheers

    Kevin

  2. Thanks for your help . I found replacing

    tasks: FirebaseListObservable;

    with
    tasks: FirebaseListObservable = [];

    gives me

    Typescript Error
    Generic type ‘FirebaseListObservable’ requires 1 type argument(s).

    BTW I’m interested building an app with offline Firebase sync capabilities – If you have any info on this I’d be grateful.

    Thanks again

  3. Hi Chris,

    I found a problem today, I don’t know if it’s due to the latest update of angularfire2 or I mistake I made.

    I’m getting: Typescript Error

    Property ‘indexOf’ does not exist on type ‘FirebaseListObservable’

    The error comes from the line

    let index = this.tasks.indexOf(task);

    inside the method removeTask

    Thanks for your book and any help is appreciated.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s