plugin_not_installed

[wecodexoficial]

Hello, thanks for the contribution of this plugin, I have a problem I hope you can help me, I am trying to use this plugin as shown in the instructions, but trying to run my application with cordova build android

Show me this error core.js:6241 ERROR Error: Uncaught (in promise): plugin_not_installed

[andrehtissot]

Would you share the whole cordova build android output log? There might be something more I can use to identify an issue.

[joel-daros]

Have same issue here using Ionic 5 (angular 9).Isn't a building error, but a runtime error:

Native: tried calling FCM.onNotification, but the FCM plugin is not installed.
Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
Could not find cordova.js script tag. Plugin loading may fail.
plugin_not_installed

Here is the building log: https://pastebin.com/pb1m4AUu

Ionic:

   Ionic CLI                     : 6.10.1 (/Users/joel/.nvm/versions/node/v12.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.11
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.1 (/Users/joel/.nvm/versions/node/v12.18.1/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

[andrehtissot]

@MrSparklle How are you building? if there are no cordova plaforms?

[joel-daros]

@andrehtissot This is my local dev environment, I don't add any platforms. I build it remotely using a devops environment.

[lutfiihidayat]

Have same issue here using Ionic 5, after update from ionic 4

have other solutions ? https://forum.ionicframework.com/t/native-tried-calling-fcm-gettoken-but-the-fcm-plugin-is-not-installed-ionic-5/191883

[wecodexoficial]

Would you share the whole cordova build android output log? There might be something more I can use to identify an issue.

Hi, this is the error

[andrehtissot]

Yes, it looks like it's not installed at all.

Would you run ionic cordova plugin?

[ostigley]

Hi @andrehtissot thanks for the hard work you put in to this plugin.

I'm having the same issue after upgrading from 6.3. to 7.0.8.

We had no issues with 6.3, but we are upgrading to avoid the firebase deprecation warning.

We are compiling on ionic appflow, and I can see this from the build log:

Discovered saved plugin "cordova-plugin-fcm-with-dependecy-updated". Adding it to the project
Installing "cordova-plugin-fcm-with-dependecy-updated" for android
Subproject Path: CordovaLib
Subproject Path: app
Running command: /builds/boost/supergold-ionic/plugins/cordova-plugin-fcm-with-dependecy-updated/scripts/install_ionic_dependencies.bat /builds/boost/supergold-ionic
added 49 packages from 36 contributors and audited 50 packages in 2.253s
Adding cordova-plugin-fcm-with-dependecy-updated to package.json

The device logs show fcm initialising, but then failing to run the javascript methods.

FCMPlugin: ==> FCMPlugin initialize
FCMPlugin: New token: db54CFgT4hA:APA91bH8...
FCMPlugin: ==> FCMPlugin sendTokenRefresh
FCMPlugin:   Unable to send event due to unreachable bridge context
SERVER  : Handling local request: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js
FCMPlugin: ==> FCMPlugin execute: ready
SystemWebChromeClient: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js: Line 46 : FCM: has been created
SystemWebChromeClient: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js: Line 43 : FCM: Ready!
FCMPlugin: ==> FCMPlugin execute: startJsEventBridge
SERVER  : Handling local request: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js
FCMPlugin: ==> FCMPlugin execute: ready
SystemWebChromeClient: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js: Line 46 : FCM: has been created
SystemWebChromeClient: http://localhost/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js: Line 43 : FCM: Ready!
FCMPlugin: ==> FCMPlugin execute: startJsEventBridge
SystemWebChromeClient: http://localhost/...js: Line 1 : Native: tried calling FCM.getToken, but the FCM plugin is not installed.
SystemWebChromeClient: http://localhost/...js: Line 1 : Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
SystemWebChromeClient: http://localhost/...js: Line 1 : Native: tried calling FCM.onTokenRefresh, but the FCM plugin is not installed.
SystemWebChromeClient: http://localhost/...js: Line 1 : Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
SystemWebChromeClient: http://localhost/...js: Line 1 : Native: tried calling FCM.onNotification, but the FCM plugin is not installed.
SystemWebChromeClient: http://localhost/...js: Line 1 : Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'
SystemWebChromeClient: http://localhost/...js: Line 1 : Native: tried calling FCM.subscribeToTopic, but the FCM plugin is not installed.
SystemWebChromeClient: http://localhost/...js: Line 1 : Install the FCM plugin: 'ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated'

Our js code is called at the end of initializeApp();:

this.fcm.getToken().then(token => {
  console.log('GET TOKEN', token);
});

this.fcm.onTokenRefresh().subscribe(token => {
  console.log('Token refreshed', token);
});

this.fcm.onNotification().subscribe(data => this.notificationReceived(data));

I am able to send notifications to the device (android, haven't tested ios yet), but tapping them just opens the app, and does not trigger the onNotification callback

[andrehtissot]

Understood. Thank you for providing the output log, helps a lot.

Would you provide your package.json or, better yet, a app example that I can clone and debug?

[ostigley]

Understood. Thank you for providing the output log, helps a lot.

Would you provide your package.json or, better yet, a app example that I can clone and debug?

It's a private repo unfortunately, but I can share the following with you for now. Let me know if you need more. thanks!

package.json

{
  "name": "supergold",
  "version": "0.0.17",
  "author": "Boost",
  "homepage": "https://www.boost.co.nz/",
  "scripts": {
    "ng": "ng",
    "start": "ionic serve",
    "build": "bash ./build.sh",
    "test": "ng test",
    "lint": "ng lint",
    "sass-lint": " ./node_modules/sass-lint/bin/sass-lint.js -c .sasslintrc.yml -v -q --max-warnings 0",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/free-regular-svg-icons": "^5.8.1",
    "@ionic-native/app-version": "^5.17.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/diagnostic": "^5.10.0",
    "@ionic-native/fcm": "^5.27.0",
    "@ionic-native/firebase": "^5.27.0",
    "@ionic-native/firebase-analytics": "^5.27.0",
    "@ionic-native/geolocation": "^5.8.0",
    "@ionic-native/in-app-browser": "^5.12.0",
    "@ionic-native/mobile-accessibility": "^5.5.1",
    "@ionic-native/network": "^5.9.0",
    "@ionic-native/open-native-settings": "^5.10.0",
    "@ionic-native/sms": "^5.12.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/toast": "^5.9.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/storage": "^2.2.0",
    "airbrake-js": "^2.0.0-beta.3",
    "cordova-android": "^8.1.0",
    "cordova-ios": "^6.1.0",
    "cordova-open-native-settings": "^1.5.2",
    "cordova-plugin-android-notch": "^1.0.3",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-androidx-adapter": "^1.1.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.0.8",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-firebase-analytics": "^4.3.1",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-inappbrowser": "4.0.0",
    "cordova-plugin-ionic": "^5.4.4",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
    "cordova-plugin-splashscreen": "5.0.4",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.2.0",
    "cordova-support-android-plugin": "^1.0.1",
    "cordova-support-google-services": "^1.3.2",
    "cordova.plugins.diagnostic": "^5.0.1",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "geolib": "^3.2.1",
    "gulp": "^4.0.2",
    "gulp-modify-file": "^1.0.1",
    "lodash": "^4.17.14",
    "moment": "^2.24.0",
    "node-js-marker-clusterer": "^1.0.0",
    "phonegap-plugin-mobile-accessibility": "git+https://github.com/phonegap/phonegap-mobile-accessibility.git",
    "query-string": "^6.8.1",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "device": "0.3.10",
    "@angular-devkit/architect": "^0.900.7",
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular-devkit/core": "^9.0.7",
    "@angular-devkit/schematics": "^9.0.7",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/lab": "1.0.24",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.14.2",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "^0.15.0",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "sass-lint": "^1.13.1",
    "ts-node": "~8.1.0",
    "tslint": "~5.16.0",
    "tslint-ionic-rules": "0.0.21",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-ionic": {
        "APP_ID": "caf97139",
        "CHANNEL_NAME": "Master",
        "UPDATE_METHOD": "none",
        "MAX_STORE": "1",
        "MIN_BACKGROUND_DURATION": "30",
        "UPDATE_API": "https://api.ionicjs.com"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "phonegap-plugin-mobile-accessibility": {},
      "cordova-plugin-geolocation": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-network-information": {},
      "cordova-open-native-settings": {},
      "cordova.plugins.diagnostic": {
        "ANDROID_SUPPORT_VERSION": "28.+"
      },
      "cordova-plugin-app-version": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-androidx": {},
      "cordova-support-google-services": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-firebase-analytics": {
        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
        "FIREBASE_ANALYTICS_VERSION": "17.4.+"
      },
      "cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_FCM_VERSION": "19.0.0",
        "ANDROID_GRADLE_TOOLS_VERSION": "3.5.3",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.3",
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/notification_icon"
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

app.component.ts

import { Component } from '@angular/core';
import { MobileAccessibility } from '@ionic-native/mobile-accessibility/ngx';
import { Platform, ToastController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TextZoomService } from './services/text-zoom.service';
import { FCM } from '@ionic-native/fcm/ngx';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

import { NOTIFICATION_TOPIC } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private mobileAccessibility: MobileAccessibility,
    private textZoomService: TextZoomService,
    private fcm: FCM,
    private router: Router,
    private storage: Storage,
    private toastController: ToastController) {
      this.initializeApp();
    }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleBlackTranslucent();
      if (this.statusBar.overlaysWebView) {
        this.statusBar.overlaysWebView(false);
      }
      this.statusBar.backgroundColorByHexString('#2A2A2A');
      this.setTextZoom();
      this.splashScreen.hide();
      this.initialiseNotifications();
    });

    this.platform.resume.subscribe(() => {
      this.setTextZoom();
    });

    if (this.platform.is('android')) {
      this.setNotchInset();
    }
  }

  initialiseNotifications() {
    this.storage.get('unSubscribeChannels')
      .then(unSubscribeChannels => {
        unSubscribeChannels = unSubscribeChannels ? unSubscribeChannels : [];
        console.log('unSubscribeChannels', unSubscribeChannels);

        if (!unSubscribeChannels.includes(NOTIFICATION_TOPIC)) {
          this.fcm.subscribeToTopic(NOTIFICATION_TOPIC);
        }
      });

    this.fcm.getToken().then(token => {
      console.log('GET TOKEN', token);
    });

    this.fcm.onTokenRefresh().subscribe(token => {
      console.log('Token refreshed', token);
    });

    this.fcm.onNotification().subscribe(data => this.notificationReceived(data));
  }

  notificationReceived(payload) {
    if (payload.wasTapped) {
      console.log('Received in background: ', payload);
      this.handleBackgroundNotification(payload);
    } else {
      console.log('Received in foreground: ', payload);
      this.handleForegroundNotification(payload);
    }
  }

  handleBackgroundNotification(payload) {
    const type = payload.type;
    switch (type) {
      case 'page':
        this.router.navigateByUrl(payload.path);
        break;
      default:
        console.log(payload);
    }
  }

  async handleForegroundNotification(payload) {
    const title = payload.title ? payload.title : payload.aps.alert.title;
    const body = payload.body ? payload.body : payload.aps.alert.body;

    const toast = await this.toastController.create({
      header: `New offer received: ${title}`,
      position: 'top',
      message: body,
      buttons: [
      {
        text: 'No thanks',
        role: 'cancel',
        cssClass: 'secondary',
      },
      {
        text: 'Show me',
        handler: () => {
          this.router.navigateByUrl(payload.path);
        }
      }
      ]
    });
    await toast.present();
  }

  setNotchInset() {
    ...
  }

  setTextZoom() {
   ...
  }
}

[ostigley]

Same issue on IOS.

[andrehtissot]

Thank you @ostigley, I'll work on reproducing your environment to debug this issue.

[elliotdennis]

I am having the same issue.

[andrehtissot]

Hi, @ostigley.

Please replace:

• import { FCM } from '@ionic-native/fcm/ngx'; for
• import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx";

As explained here.

[ostigley]

@andrehtissot thanks so much, this seems to have fixed the issue on Android. Looks like the upgraded package requires me to do some extra permission request on IOS, so I will get on to that.

Thanks again 🥝

IMO this can be closed?

[andrehtissot]

@andrehtissot thanks so much, this seems to have fixed the issue on Android.

Good to know. :D

Looks like the upgraded package requires me to do some extra permission request on IOS, so I will get on to that.

It went from always check permissipn on startup, to wait until the developer deems to be a good time for a request. This allows the app to engage with the user before requesting the Push permission, hence increasing the chances of a positive answer.

You can check how to request it here => https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated#fcmrequestpushpermission

[aliexalter]

@ostigley I look at your package.json How did you install firebase anayltics with this plugin. When I installe firebase analytics plugin it gives me conflict saying google services name already exist. I am also using appflow to build my app.

* What went wrong:
[cordova] A problem occurred evaluating project ':app'.
[cordova] > Failed to apply plugin [id 'com.google.gms.google-services']
[cordova]    > Cannot add extension with name 'googleServices', as there is an extension already registered with that name.

https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/128#issuecomment-662080826

[Arthurferrera]

Olá, @ostigley .

Substitua:

• import { FCM } from '@ionic-native/fcm/ngx'; para
• import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx";

Conforme explicado aqui .

Hello, I'm having the same problem, I changed the import as quoted above and returns me this error, can you help me?

Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [? [Object Object] ?, ..., ..., ..., ..., ..., ..., ...]

[aliexalter]

@Arthurferrera Try Also import it to app.module.ts in Provider add class name e.g. FCM

[aliexalter]

@Arthurferrera Or just import import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic'; no need to add to constructor. use it like token = await FCM.getToken();

[Arthurferrera]

@aliexalter Thanks, apparently it worked.

In ionic serve i have error TypeError: Cannot read property 'getToken' of undefined, but when I ran it on the Iphone it rescued the token normally.

[aliexalter]

@Arthurferrera because it’s Cordova plugin and in ionic serve cordova is not loaded. To run in browser you can try Cordova platform add browser and then Cordova emulate browser —livereload

[ostigley]

Sorry I didn't see this @Arthurferrera . Sounds like you are on track now. Here's some sample code from our component. Not the prettiest but it's working well.

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private fcm: FCM,
    ) {
      this.initializeApp();
    }

  initializeApp() {
    this.platform.ready().then(() => {
      this.initialiseNotifications();
    });
  }

  async initialiseNotifications() {
    const wasPermissionGiven: boolean = await this.fcm.requestPushPermission({
      ios9Support: {
        timeout: 30,  // How long it will wait for a decision from the user before returning `false`
        interval: 0.3 // How long between each permission verification
      }
    });

    if (!wasPermissionGiven) return ;

    this.storage.get('unSubscribeChannels')
      .then(unSubscribeChannels => {
        unSubscribeChannels = unSubscribeChannels ? unSubscribeChannels : [];
        console.log('unSubscribeChannels', unSubscribeChannels);

        if (!unSubscribeChannels.includes(NOTIFICATION_TOPIC)) {
          this.fcm.subscribeToTopic(NOTIFICATION_TOPIC);
        }
      });

    this.fcm.getToken().then(token => {
      console.log('GET TOKEN', token);
    });

    this.fcm.onTokenRefresh().subscribe(token => {
      console.log('Token refreshed', token);
    });

    this.fcm.onNotification().subscribe(data => this.notificationReceived(data));

    this.fcm.getInitialPushPayload().then(data => {
      if (!data) {
        console.log('No notification payload', data);
        return;
      }

      this.notificationReceived(data);
    });
  }

[Arthurferrera]

@aliexalter and @ostigley Thanks, it's working well for now, they saved me