I'm trying to implement ionic admob plus in my ionic application. But whenever I try to show the ad I get the following error. This error appears both for a banner as an interstitial ad.
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
My code: for a banner ad:
this.adMob.banner.show({
id: {
android: "ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxxxxxx",
ios: ""
}
});
My code: for an interstitial ad:
this.adMob.interstitial.load({
id: {
android: "ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxx",
ios: ""
}
}).then(() => this.adMob.interstitial.show())
both android ad keys are correct. My 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"
]
}
}
Does anyone see what is going wrong?
The problem is that the ionic plugin wrapper is broken and it just won't work. And it seems that it has been like that for a while, so it is not likely that it will be fixed anytime soon.
So, in order to make it work, uninstall everything admob-related:
ionic cordova plugin remove cordova-admob-plus
npm uninstall @ionic-native/admob-plus
Also remove from your code all the imports, instances and calls to the plugin. Then install just the cordova plugin:
cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx
In the page that you are using admob on, add this before the @Component declaration:
declare var admob;
This variable will give you access to the plugin. Then you can load the banner like this:
admob.setDevMode(true);
admob.banner.show({
id: {
ios: 'ca-app-pub-xxx~xxx',
},
});
You can read more about this issue here