angularfire2 and firebase update in ionic 3 project

Question

I updated angularfire2 and firebase in my ionic project. Before that,everything was working correctly but now, i get this error when i run ionic serve.

Typescript error : File '/node_modules/firebase/app.d.ts' is not a module. i opened the file and i noticed that it is empty.

here is my package.json file

 "dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/camera": "^3.13.1",
"@ionic-native/core": "3.10.2",
"@ionic-native/image-resizer": "^4.3.0",
"@ionic-native/network": "^4.2.1",
"@ionic-native/splash-screen": "3.10.2",
"@ionic-native/status-bar": "3.10.2",
"@ionic/storage": "2.0.1",
"angularfire2": "^4.0.0-rc0",
"firebase": "^4.6.2",
"ionic-angular": "3.4.2",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"typings": "^2.1.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.3.3"
},
"cordovaPlugins": [
  "cordova-plugin-whitelist",
  "cordova-plugin-console",
  "cordova-plugin-statusbar",
  "cordova-plugin-device",
  "cordova-plugin-splashscreen",
  "ionic-plugin-keyboard"
],
  "cordovaPlatforms": [],
  "description": "loginApp: An Ionic project"
}

So what could be the reason of this error ?

Answer 1

Configuring AngularFire and Firebase

Install the required packages in your project directory:

$ npm install angularfire2 firebase promise-polyfill --save

This should add angularfire2, promise-polyfill and firebase entry in your project's package.json file as dependencies. Something similar to:

"angularfire2": "^4.0.0-rc.1", "firebase": "^4.1.3", "promise-polyfill": "^6.0.2",

Setup @NgModule

Open your project in your favourite editor and open the app.module.ts file, under src/app and add the following three entries.

1) Import AngularFireModule and AngularFireDatabaseModule at top.

2) Define your firebaseConfig constant.

3) Initialize your app, by adding AngularFireModule and AngularFireAuthModule in the "imports" array in @NgModule

4) Also, add AngularFireDatabase in the "providers" array in @NgModule

your app.module.ts file should look something like this.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

```

Inject AngularFire and Bind it to List

Now inject AngularFireDatabase in your component. Open your home.ts by going into src/pages/home/home.ts and make the following changes:

1) Import "AngularFireDatabase" at the top of your component.

2) Inject your AngularFireDatabase dependency in the constructor.

3) Call the list method on AngularFireDatabase object.

Your home.ts file should look like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items: Observable<any[]>;

  constructor(public navCtrl: NavController, afDB: AngularFireDatabase) {
    this.items = afDB.list('cuisines').valueChanges();
  }

}

*Ensure you've cuisines node in your database with some primitive data.

Update your home.html at src/pages/home/home.html, with following entry

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item class="text" *ngFor="let item of items | async">
            {{item | json}}
        </ion-item>
    </ion-list>
</ion-content>

Run your app by executing the following command

C:\projects\auth-ng4-ionic3-af2> ionic serve

This should fetch the data from firebase.

Source: https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md

EDIT: If this doesn't work, you may need to downgrade firebase. In this case, run the following command:

npm install --save firebase@3.9.*