Angularfire2 error TS2305

Question

I'm new to the ionic framework world and now I'm trying to create a app for a schoolproject. To save data in the app I'll be using firebase (for the first time). I try to import Angularfire and FirebaseListObservable to my .ts file but i get this error message:

"TS2305:Module "'C:/Users/matss/myRecords/node_modules/angularfire2/index"' has no exported member 'AngularFire'.

Here's my import in app.module.ts

import { AngularFireModule } from 'angularfire2;

export const firebaseConfig = {
apiKey: "blablabla",
authDomain: "blablabla",
databaseURL: "blablabla",
projectId: "blablabla",
storageBucket: "blablabla",
messagingSenderId: "blablabla"
};

here's my code in excersises.ts, which gives the errormessage:

import { AngularFire, FirebaseListObservable } from 'angularfire2';

  constructor(private navParams: NavParams, public nacCtrl: NavController, af: AngularFire){
this.records = af.database.list('/records');

}

As a rookie to this, I haven't found any "good" tutorials, I might use the wrong keywords in my searches.. But for this I followed this tutorial: https://www.joshmorony.com/building-a-crud-ionic-2-application-with-firebase-angularfire/

Thanks for your help.

Your import line references AngularFire in the second block, which is not available. I tried changing this to AngularFireModule (similar to the first block) but then my samples get FirebaseListObservable is not defined. — Steven Scott

JESlabbert JESlabbert · Accepted Answer · 2017-05-03T18:17:59

I ran into the same issue, however I was able to solve it. I read Josh's article, as I read all of his and he is really good, but recently AngularFire2 was updated from what I understand and that has caused a few changes.

How I solved it was like this:

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

I also imported import { AngularFireModule } from 'angularfire2'; instead of import { AngularFire } from 'angularfire2';

From what I understand, they are modularising it a lot more so that people can use the functions they want and not have all the overhead. I might be wrong though.

This did work for me however.

So, with your code, it should now look like this:

In your app.module.ts file:

import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';

Then import it under the @NgModule tag imports like so:

  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule 
]

Then under your component ts that you are working with. do the following:

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

Then later on you would need to declare it

records: FirebaseListObservable<any[]>;

In your constructor:

constructor(private navParams: NavParams, public nacCtrl: NavController, db: AngularFireDatabase){
    this.records = db.list('/records');}

Angularfire2 error TS2305

1 Answers