admob plus 和 ionic 导致运行时错误（plugin.constructor.getPluginRef 不是函数）

Question

我正在尝试在我的离子应用程序中实施离子 admob plus。但每当我尝试显示广告时，我都会收到以下错误。对于横幅广告和插页式广告都会出现此错误。

    
    ERROR Error: Uncaught (in promise): TypeError: plugin.constructor.getPluginRef is not a function
    TypeError: plugin.constructor.getPluginRef is not a function
        at checkAvailability (VM2270 vendor.js:50324)
        at callCordovaPlugin (VM2270 vendor.js:50417)
        at VM2270 vendor.js:50251
        at VM2270 vendor.js:50193
        at new t (VM2269 polyfills.js:3)
        at tryNativePromise (VM2270 vendor.js:50192)
        at getPromise (VM2270 vendor.js:50213)
        at wrapOtherPromise (VM2270 vendor.js:50250)
        at VM2270 vendor.js:50509
        at cordova (VM2270 vendor.js:148098)
        at c (VM2269 polyfills.js:3)
        at new t (VM2269 polyfills.js:3)
        at tryNativePromise (VM2270 vendor.js:50192)
        at getPromise (VM2270 vendor.js:50213)
        at wrapOtherPromise (VM2270 vendor.js:50250)
        at VM2270 vendor.js:50509
        at cordova (VM2270 vendor.js:148098)
        at Banner.show (VM2270 vendor.js:91387)
        at MyApp.webpackJsonp.717.MyApp.showAd (VM2271 main.js:2123)
        at VM2271 main.js:2139

我的代码：横幅广告：

this.adMob.banner.show({
    id: {
        android: "ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxxxxxx",
        ios: ""
    }
});

我的代码：插页式广告：

this.adMob.interstitial.load({
    id: {
        android: "ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxx",
        ios: ""
    }
}).then(() => this.adMob.interstitial.show())

两个 android 广告键都是正确的。我的 package.json:

{
    "name": "xxxxxxxxxxxx",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/cli": "^6.2.9",
        "@angular/common": "5.0.3",
        "@angular/compiler": "5.0.3",
        "@angular/compiler-cli": "5.0.3",
        "@angular/core": "5.0.3",
        "@angular/forms": "5.0.3",
        "@angular/http": "5.0.3",
        "@angular/platform-browser": "5.0.3",
        "@angular/platform-browser-dynamic": "5.0.3",
        "@ionic-native/admob-plus": "^5.17.0",
        "@ionic-native/camera": "^5.15.1",
        "@ionic-native/core": "^5.15.1",
        "@ionic-native/device": "^5.15.1",
        "@ionic-native/facebook": "^5.15.1",
        "@ionic-native/file": "^5.15.1",
        "@ionic-native/file-path": "^5.15.1",
        "@ionic-native/file-transfer": "^5.15.1",
        "@ionic-native/google-plus": "^5.15.1",
        "@ionic-native/splash-screen": "^5.15.1",
        "@ionic-native/status-bar": "^5.15.1",
        "@ionic/lab": "^1.0.13",
        "@ionic/pro": "1.0.20",
        "@ionic/storage": "^2.2.0",
        "cordova-admob-plus": "^0.32.0",
        "cordova-android": "7.0.0",
        "cordova-plugin-android-permissions": "^1.0.2",
        "cordova-plugin-camera": "^4.1.0",
        "cordova-plugin-device": "^2.0.3",
        "cordova-plugin-facebook4": "^3.2.0",
        "cordova-plugin-file": "^6.0.2",
        "cordova-plugin-file-transfer": "^1.7.1",
        "cordova-plugin-filepath": "^1.5.6",
        "cordova-plugin-googleplus": "^7.0.2",
        "cordova-plugin-inappbrowser": "^3.1.0",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "^1.2.1",
        "cordova-plugin-splashscreen": "^5.0.3",
        "cordova-plugin-statusbar": "^2.4.3",
        "cordova-plugin-whitelist": "^1.3.4",
        "cordova-plugin-x-socialsharing": "^5.4.3",
        "cordova-sqlite-storage": "^2.6.0",
        "es6-promise-plugin": "^4.2.2",
        "ionic-angular": "3.9.2",
        "ionic-long-press": "^1.5.0",
        "ionicons": "3.0.0",
        "ng2-cordova-oauth": "0.0.6",
        "node-sass": "^4.10.0",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.2.3",
        "core-js": "^2.6.4",
        "typescript": "^3.1.4"
    },
    "description": "An Ionic project",
    "cordova": {
    "plugins": {
        "cordova-sqlite-storage": {},
        "cordova-plugin-device": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-ionic-webview": {},
        "cordova-plugin-ionic-keyboard": {},
        "cordova-plugin-file-transfer": {},
        "cordova-plugin-file": {},
        "cordova-plugin-android-permissions": {},
        "cordova-plugin-inappbrowser": {},
        "cordova-plugin-whitelist": {},
        "cordova-plugin-googleplus": {
            "REVERSED_CLIENT_ID": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            "PLAY_SERVICES_VERSION": "11.8.0"
        },
       "cordova-plugin-facebook4": {
            "APP_ID": "xxxxxxxxxxxxxx",
            "APP_NAME": "xxxxxx",
            "FACEBOOK_ANDROID_SDK_VERSION": "4.38.1"
        },
        "cordova-plugin-statusbar": {},
        "cordova-plugin-camera": {},
        "cordova-plugin-filepath": {},
        "cordova-admob-plus": {
            "APP_ID_ANDROID": "ca-app-pub-xxxxxxxxxxxxx~xxxxxxxxxxxxx",
            "PLAY_SERVICES_VERSION": "18.2.0"
        }
    },
    "platforms": [
        "android"
    ]
  }
}

有人知道哪里出了问题吗？

Answer 1

问题是 ionic 插件包装器损坏了，无法正常工作。而且好像已经有一段时间了，估计不会很快修复。

因此，为了使其正常工作，请卸载与 admob 相关的所有内容：

ionic cordova plugin remove cordova-admob-plus
npm uninstall @ionic-native/admob-plus

同时从您的代码中删除对插件的所有导入、实例和调用。然后只安装 cordova 插件：

cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx

在您使用 admob 的页面中，在 @Component 声明之前添加：

declare var admob;

此变量将使您能够访问该插件。然后你可以像这样加载横幅：

admob.setDevMode(true);
admob.banner.show({
    id: {
      ios: 'ca-app-pub-xxx~xxx',
    },
  });

您可以阅读有关此问题的更多信息here

Answer 2

参考 admob plus 的文档，您应该使用包 @admob-plus/ionic 而不是 @ionic-native/admob-plus。

此插件由与 cordova-package 相同的人维护。这应该比直接使用 cordova 更好。

Answer 3

这是一个对我有用的解决方案，因为插件在 2022 年发生了变化。我安装了 admob-plus-cordova 插件，如下所示：

$ ionic cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-xxxx~yyyy --variable APP_ID_IOS=ca-app-pub-xxxx~yyyy

但是当我用这个@ionic-native/admob-plus时，我也收到了上面的错误。我不想直接使用 Cordova 插件。所以为了解决这个问题，我这样做了：

npm uninstall @ionic-native/admob-plus
npm install @admob-plus/ionic

然后将所有引用更改为 admob-plus 从此：

import { AdMob } from '@ionic-native/admob-plus/ngx';

为此：

import { AdMob } from '@admob-plus/ionic/ngx';

就是这样。另请务必查看显示广告的代码。

admob plus 和 ionic 导致运行时错误（plugin.constructor.getPluginRef 不是函数）

admob plus and ionic results in runtime error (plugin.constructor.getPluginRef is not a function)

admob

ionic-framework