Maybe someone will find it useful:
Using Quasar /VueJs Framework and Ionic Capacitor.
For Quasar installation and adding Capacitor please refer to official docs:
https://quasar.dev/
Installation:
(Or More how to make quasar work with latest Capacitor and Latest Android Studio (AndroidX)
Once you have project ready( quasar create project-name
)
And you have added capacitor mode to quasar( quasar mode add capacitor
)
You might notice, when you try to run quasar dev -m capacitor -T android
In When you try to play app in Android studio you get an error:
Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory)
from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
is also present at [androidx.core:core:1.2.0] AndroidManifest.xml:24:18-86 value=(androidx.core.app.CoreComponentFactory).
Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:5:5-44:19 to override.
There is a ways to get rid of that, but my solution is to just use latest ionic capacitor.
To do it, navigate to src-capacitor in your project and open terminal there nad run:
npm install @capacitor/core@latest @capacitor/cli@latest @capacitor/android@latest
and:
npx cap sync
Now you have to delete src-capacitor/android directory (otherwise error will be still there)
and run again in your MAIN project directory (not src-capacitor):
quasar dev -m capacitor -T android
At this point you should have nicely running app in emulator.
Now let’s add cordova-plugin-admob-free plugin.
in your src-capacitor run:
npm install cordova-plugin-admob-free
and npx cap sync
You should then see in the console something like:
Found 3 Cordova plugins for android
cordova-admob-sdk (0.24.1)
cordova-plugin-admob-free (0.27.0)
cordova-promise-polyfill (0.0.2)
√ update android in 3.21s
If you are missing those extra 2 plugins were installed automatically,
but if you can’t see them, just install them manually same way as above.
Run again quasar dev -m capacitor -T android
from your main directory
You will see error in adnroid studio due to non androidx plugin used in admob plugin:
error: package android.support.annotation does not exist import android.support.annotation.NonNull;
In android studio navigate to build-gradle (Module: capacitor-cordova-android-plugins)
and in dependencies add implementation "androidx.annotation:annotation:1.1.0"
So it looks something like:
dependencies {
implementation fileTree(dir: 'src/main/libs', include: ['*.jar'])
implementation "org.apache.cordova:framework:$cordovaAndroidVersion"
// SUB-PROJECT DEPENDENCIES START
implementation "com.google.android.gms:play-services-base:11.0.4"
implementation "com.google.android.gms:play-services-ads:11.0.4"
// SUB-PROJECT DEPENDENCIES END
implementation "androidx.annotation:annotation:1.1.0"
}
Now navigate to src-capacitor\android\capacitor-cordova-android-plugins\src\main\java\name\ratson\cordova\admob\AdMob.java
Which is where the error is (there is a link to that file in error if you don’t wannat search it)
and change: import android.support.annotation.NonNull;
to import androidx.annotation.NonNull;
Now we have our app working again and with cordova admob plugin.
Configure AdMob App ID in Android studio:
Navigate to: src-capacitor\android\capacitor-cordova-android-plugins\src\main\AndroidManifest.xml
and in line <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="$ADMOB_APP_ID"/>
There is a place for you App ID, just replace $ADMOB_APP_ID
with your app ID ca-app-pub-xxxxx~xxxx
(I believe that could be set up on plugin installation, but it’s good to know)
Also you might have some other error:
ava.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzur;
look into build.gradle (Module: src-capacitor-android-cordova-android-plugins)
and change in dependancies play serivces build to “+” like this:
implementation "com.google.android.gms:play-services-base:+"
implementation "com.google.android.gms:play-services-ads:+"
At this point rest will be in your Quasar Component.
You can use something like:
document.addEventListener('deviceready', async () => {
await window.AdMob.interstitial.prepare({
id: 'ca-app-pub-xxxxx/xxxxx', //<--- your ADs ID, has to match your add type
isTesting: true,
autoShow: false
})
document.addEventListener('admob.interstitial.events.LOAD', () => {
console.log('Add Loaded')
window.AdMob.interstitial.show()
})
document.addEventListener('admob.interstitial.events.LOAD_FAIL', err => {
this.error = JSON.stringify(err)
})
})
documentation for admob cordova here: https://ratson.github.io/cordova-plugin-admob-free/
Please mind, that when creating AD ID in google admob, it has to be the same type (banner, video, interstitial) as the one you are going to use
otherwise it won’t work, and you will get LOAD_FAIL event triggered all the time.