Ionic Firebase Plugin not installed

7
votes

I created a new ionic project and added firebase to this, but everytime I do an ionic serve -c and open the DevApp, I see in the console following errors:

  • Ionic Native: tried calling Firebase.subscribe, but the Firebase plugin is not installed.
  • Install the Firebase plugin: 'ionic cordova plugin add cordova-plugin-firebase'

Ionic info:

 ionic (Ionic CLI)  : 4.1.2 (C:\Users\xxx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])

Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 5 other plugins)

System:

NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

app.component.ts:

export class MyApp {
  rootPage: any = HomePage;

  constructor(public platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public toastCtrl: ToastController, private firebase: Firebase) {
    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();
      splashScreen.hide();

      try {
        this.initializeFirebase();
      } catch (error) {
        this.firebase.logError(error);
      }

    });


  }

  initializeFirebase() {
    if (!this.platform.is("core")) {
      this.firebase.subscribe("all");
      this.platform.is('android') ? this.initializeFirebaseAndroid() : this.initializeFirebaseIOS();
    }
  }
  initializeFirebaseAndroid() {
    this.firebase.getToken().then(token => { });
    this.firebase.onTokenRefresh().subscribe(token => { })
    this.subscribeToPushNotifications();
  }
  initializeFirebaseIOS() {
    this.firebase.grantPermission()
      .then(() => {
        this.firebase.getToken().then(token => { });
        this.firebase.onTokenRefresh().subscribe(token => { })
        this.subscribeToPushNotifications();
      })
      .catch((error) => {
        this.firebase.logError(error);
      });
  }
  subscribeToPushNotifications() {
    this.firebase.onNotificationOpen().subscribe((response) => {
      if (response.tap) {
        console.log(response.body);
        //Received while app in background (this should be the callback when a system notification is tapped)
        //This is empty for our app since we just needed the notification to open the app
      } else {
        console.log(response.body);
        //received while app in foreground (show a toast)
        let toast = this.toastCtrl.create({
          message: response.body,
          duration: 3000
        });
        toast.present();
      }
    });
  }
}

app.module.ts:

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 { Firebase } from '@ionic-native/firebase';

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

Anyone having the same problem at the moment?

5
angularfirebasecordovaionic-frameworkionic4
Did you get any solution? - vignesh

5 Answers

2
votes

try to check firebase cloud messaging plugin

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated

perhaps double check google-services.json location

projects\src\app\google-services.json

and at the end re-add android and check plugins

ionic repair
0
votes

TL;DR - check out what Cordova version you use and update it to match project dependency requirements (i.e. npm install -g [email protected]).

Most likely the version of the build tool being used (Cordova) is not compatible with the package (plugin) that needs to be used.

I had similar issue with cordova-plugin-firebase-analytics running Cordova 8.1. It looked like it was work well on Android but did not work as expected on iOS. While debugging, I was able to detect errors in the console's error log such as

tried calling [method] but the FirebaseAnalytics plugin is not installed

Re-adding the iOS platform having the --verbose flag included showed following:

Installing "cordova-plugin-firebase-analytics" for ios Plugin doesn't support this project's cordova version. cordova: 8.1.1, failed version requirement: >=9.0.0

After installing the at least minimum supported version (9.0.0) and rebuilding the iOS platform (remove platform, add platform, prepare/run/emulate iOS build), the issue was resolved.

-1
votes

I was also facing same problem, then I tried FCM instead of Firebase.

I will suggest you use FCM for the same. It is working fine for me.

ionic cordova plugin rm cordova-plugin-firebase
ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/fcm
-2
votes

You have to add firebase to your project app module, under provider. You would likely need to do this for any plugin you install in the future as well.

If you are using Ionic3, it's the file app.module.ts.

-2
votes

This worked for me!! Use platform.ready() function before using the object of the imported class.

constructor(public qrScanner: QRScanner) {
                // solve the problem - "plugin not installed".
                platform.ready().then(()=>{
                  this.qrscanner();
                })

}

Hope this helps...