由于 Cannot read 属性 'onTokenRefresh' of undefined，我无法在离子应用程序中获取设备令牌

Question

我遵循了两个建议安装以下内容的教程：

ionic cordova 插件添加 cordova-plugin-fcm-with-dependecy-updated npm 安装@ionic-native/fcm

我在安装到设备后一直收到错误，说没有安装 fcm 插件，所以我查看了 https://www.npmjs.com/package/cordova-plugin-fcm-with-dependecy-updated#fcmontokenrefresh 建议卸载 npm uninstall @ionic-native/fcm # Ionic 支持和冲突的网站使用@ionic-native 的实现。

所以我这样做并使用了这个：

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);
    });
  }

但现在我得到以下信息：

ERROR 错误：未捕获（承诺）：TypeError：无法读取未定义的属性 'onTokenRefresh' 类型错误：无法读取未定义的属性 'onTokenRefresh'

此时我卡住了。我得到 'FCMPluging isn't installed if I using Ionic plugin 并且当我使用 Cordova 的库时得到 Cannot read 属性 'onTokenRefresh' of undefined 错误。任何帮助将不胜感激。

{
  "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

Answer 1

试试这个：

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));
  }

由于 Cannot read 属性 'onTokenRefresh' of undefined，我无法在离子应用程序中获取设备令牌

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

cordova

ionic-framework

firebase-cloud-messaging

cordova-plugins

cordova-plugin-fcm