Getting install FCM plugin issue even if plugin is installed

Question

I am building push notification for my app but when I am running my app on device I am getting following error:

vendor-es2015.js:101693 Native: tried calling FCM.getToken, but the FCM plugin is not installed.
pluginWarn @ vendor-es2015.js:101693
vendor-es2015.js:101699 Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
pluginWarn @ vendor-es2015.js:101699
vendor-es2015.js:101693 Native: tried calling FCM.onNotification, but the FCM plugin is not installed.
pluginWarn @ vendor-es2015.js:101693
vendor-es2015.js:101699 Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
pluginWarn @ vendor-es2015.js:101699
vendor-es2015.js:101693 Native: tried calling FCM.onTokenRefresh, but the FCM plugin is not installed.
pluginWarn @ vendor-es2015.js:101693
vendor-es2015.js:101699 Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
pluginWarn @ vendor-es2015.js:101699
vendor-es2015.js:72492 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:175 OPEN database: _ionicstorage
plugins/cordova-sqlite-storage/www/SQLitePlugin.js:106 new transaction is queued, waiting for open operation to finish
vendor-es2015.js:43427 ERROR Error: Uncaught (in promise): plugin_not_installed
    at resolvePromise (polyfills-es2015.js:4153)
    at resolvePromise (polyfills-es2015.js:4110)
    at polyfills-es2015.js:4214
    at ZoneDelegate.invokeTask (polyfills-es2015.js:3747)
    at Object.onInvokeTask (vendor-es2015.js:73280)
    at ZoneDelegate.invokeTask (polyfills-es2015.js:3746)
    at Zone.runTask (polyfills-es2015.js:3524)
    at drainMicroTaskQueue (polyfills-es2015.js:3915)
defaultErrorLogger @ vendor-es2015.js:43427
main-es2015.js:2538 response -> HttpResponse
2vendor-es2015.js:43427 ERROR plugin_not_installed
defaultErrorLogger @ vendor-es2015.js:43427

You can see below plugin is installed but still I am getting the same error. I tried uninstalling and installing it again, I removed and added the platform again but still same error is coming.

Below is the output of Ionic Info command:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.803.27
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 8.3.27
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

Utility:

   cordova-res (update available: 0.15.1) : 0.11.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.11.3
   OS     : macOS High Sierra
   Xcode  : Xcode 10.1 Build version 10B61

ionic cordova plugin list
> cordova plugin ls
com-sarriaroman-photoviewer 1.2.4 "PhotoViewer"
com.razorpay.cordova 0.16.1 "RazorpayCheckout"
cordova-android-support-gradle-release 3.0.1 "cordova-android-support-gradle-release"
cordova-plugin-androidx-adapter 1.1.1 "cordova-plugin-androidx-adapter"
cordova-plugin-cocoapod-support 1.6.2 "Cordova CocoaPods Dependency Support"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.0.0 "Cordova FCM Push Plugin"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.6.5 "SocialSharing"
cordova-sqlite-storage 5.0.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova-support-android-plugin 1.0.2 "cordova-support-android-plugin"
cordova-support-google-services 1.4.1 "cordova-support-google-services"
es6-promise-plugin 4.2.2 "Promise"

Answer 1

For Ionic 5 app, the cordova-plugin-fcm-with-dependecy-updated plugin should be used a little differently than Ionic 4, as per the documentation here.

For my Ionic 5 app, i simply imported it in app.component.ts as below (i.e. as a factory class):
import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic";

and used it when the platform is ready:

platform.ready().then(() => {
  // Some code ..
  FCM.getToken().then(token => {
    console.log(token);
  }, error => { console.log(error) });

  // More code ..
});

Also, as per this plugin's documentation, there is no need for the @ionic-native/fcm package anymore. However, I haven't tested this for IOS yet.

Answer 2

I was also getting this issue. Below are the steps that resolved my issue.

Install the below plugins:

1. cordova plugin add cordova-plugin-androidx-adapter.
2. cordova plugin add cordova-plugin-androidx;

and then:

import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic";

to get token:

FCM.gettoken().then(res=>{

})

Answer 3

me too have been facing the same issue for over 1 hour but now found that was using :

import { FCM } from '@awesome-cordova-plugins/fcm/ngx';

instead of :

import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';