angularfire 2 TypeError: Firebase is not a constructor

Question

I'm want to develop a sample app with ionic 2 and angularfire 2.

I successfully integrated angularfire 2 in Ionic 2, but when i tried to fetch my data from firebase i got this error in browser console:

`XCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Firebase is not a constructor
ORIGINAL STACKTRACE:
TypeError: Firebase is not a constructor
    at exports.COMMON_PROVIDERS.core_1.provide.useFactory (http://localhost:8100/build/js/app.bundle.js:38023:45)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:28:81)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:34:98)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:40:97)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:52:124)
    at DebugAppView._View_MyApp_Host0.injectorGetInternal (MyApp_Host.template.js:74:80)
    at DebugAppView.AppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25671:21)
    at DebugAppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25844:49)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25299:33)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25302:48)
ERROR CONTEXT:
[object Object]
app.bundle.js:33661 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Firebase is not a constructor
ORIGINAL STACKTRACE:
TypeError: Firebase is not a constructor
    at exports.COMMON_PROVIDERS.core_1.provide.useFactory (http://localhost:8100/build/js/app.bundle.js:38023:45)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:28:81)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:34:98)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:40:97)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:52:124)
    at DebugAppView._View_MyApp_Host0.injectorGetInternal (MyApp_Host.template.js:74:80)
    at DebugAppView.AppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25671:21)
    at DebugAppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25844:49)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25299:33)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25302:48)
ERROR CONTEXT:
[object Object]BrowserDomAdapter.logError @ app.bundle.js:33661
app.bundle.js:33661 STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:33661
app.bundle.js:33661 Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Firebase is not a constructor
ORIGINAL STACKTRACE:
TypeError: Firebase is not a constructor
    at exports.COMMON_PROVIDERS.core_1.provide.useFactory (http://localhost:8100/build/js/app.bundle.js:38023:45)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:28:81)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:34:98)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:40:97)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:52:124)
    at DebugAppView._View_MyApp_Host0.injectorGetInternal (MyApp_Host.template.js:74:80)
    at DebugAppView.AppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25671:21)
    at DebugAppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25844:49)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25299:33)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25302:48)
ERROR CONTEXT:
[object Object]
    at resolvePromise (http://localhost:8100/build/js/zone.js:538:32)
    at resolvePromise (http://localhost:8100/build/js/zone.js:523:18)
    at http://localhost:8100/build/js/zone.js:571:18
    at ZoneDelegate.invokeTask (http://localhost:8100/build/js/zone.js:356:38)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (http://localhost:8100/build/js/app.bundle.js:30460:41)
    at ZoneDelegate.invokeTask (http://localhost:8100/build/js/zone.js:355:43)
    at Zone.runTask (http://localhost:8100/build/js/zone.js:256:48)
    at drainMicroTaskQueue (http://localhost:8100/build/js/zone.js:474:36)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:8100/build/js/zone.js:426:22)BrowserDomAdapter.logError @ app.bundle.js:33661
zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Firebase is not a constructor
ORIGINAL STACKTRACE:
TypeError: Firebase is not a constructor
    at exports.COMMON_PROVIDERS.core_1.provide.useFactory (http://localhost:8100/build/js/app.bundle.js:38023:45)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:28:81)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:34:98)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:40:97)
    at DebugAppView.Object.defineProperty.get (MyApp_Host.template.js:52:124)
    at DebugAppView._View_MyApp_Host0.injectorGetInternal (MyApp_Host.template.js:74:80)
    at DebugAppView.AppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25671:21)
    at DebugAppView.injectorGet (http://localhost:8100/build/js/app.bundle.js:25844:49)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25299:33)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:25302:48)
ERROR CONTEXT:
[object Object] ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedExceptionconsoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): EXCEPTION: Error in :0:0(…)consoleError @ zone.js:463
app.bundle.js:74808 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator`

Here is my app.ts

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import { FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [
    FIREBASE_PROVIDERS,
    defaultFirebase('https://samplequizapp-50eb5.firebaseio.com')
  ],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

and this is my home.ts

import {Page} from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  myData: FirebaseListObservable<any[]>;

  constructor(public af: AngularFire) {
    this.myData = af.database.list('/userId')
    console.log(this.myData)
  }

};

Thanks :)

Answer 1

I suspect you have installed the wrong version of firebase. You need to continue to use version 2.4.2 of firebase since AngularFire2 has not been updated to support the latest release of firebase.

More information here: https://github.com/aaronksaunders/ionic2-angularfire-sample

check out the package.json