cordovaionic-frameworkfirebase-cloud-messagingcordova-pluginscordova-plugin-fcm

I'm unable to get Device token in an ionic app as a result of Cannot read property 'onTokenRefresh' of undefined

I followed two tutorials that suggested installed the following:

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated npm install @ionic-native/fcm

I kept getting errors after installing to a device that said the fcm plugin isn't installed so I viewed https://www.npmjs.com/package/cordova-plugin-fcm-with-dependecy-updated#fcmontokenrefresh site that suggested uninstalling npm uninstall @ionic-native/fcm # Ionic support is included and conflicts with @ionic-native's implementation.

So I did that and used this instead:

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


  getUserToken(userId: string) {
    FCM.getToken().then(token => {
      console.log('token');
      console.log(token);
    });
  }

  getToken(userId: string) {
    FCM.onTokenRefresh((fcmToken: string) => {
      console.log('token refresh');
      console.log(fcmToken);
    });
  }

But now I get the following:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'onTokenRefresh' of undefined TypeError: Cannot read property 'onTokenRefresh' of undefined

At this point I'm stuck. I get 'FCMPluging isn't installed if I use Ionic plugin and I get the Cannot read property 'onTokenRefresh' of undefined error when I use Cordova's library. Any help would be greatly appreciated.

{
  "name": "",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/image-picker": "^5.27.0",
    "@ionic-native/ionic-webview": "^5.27.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "^2.3.0",
    "angularfire2": "^5.4.2",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.2.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^7.17.1",
    "moment": "^2.27.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-telerik-imagepicker": {},
      "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": "@mipmap/ic_launcher"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {}
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

9.0.0 (cordova-lib@9.0.1)

ionic -v
6.0.1

Solution

  • Try this:

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

constructor(private fcm: FCM){}

private async pushSetup() {
    await this.platform.ready();

    console.log('FCM SETUP INIT');
    if (!this.platform.is('cordova')) {
      return;
    }

    console.log('IN CORDOVA');

    this.hasPermission = await this.fcm.requestPushPermission();
    console.log('CHECK hasPermission:', this.hasPermission);

    this.token = await this.fcm.getToken();
    console.log('CHECK getToken: ' + this.token);

    console.log('ON NOTIFICATION SUBSCRIBE');
    this.fcm
      .onTokenRefresh()
      .subscribe((newToken) => console.log('NEW TOKEN:', newToken));
    this.fcm
      .onNotification()
      .subscribe((payload: object) => console.log('ON NOTIFICATION:', payload));
  }