Latest Capacitor + AndroidX and cordova AdMob working with quasar.

Uneasy

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.

metalsadman

Thx for sharing.

jpolstrre

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…

I get it in all the capacitor project
and I solve it like this:

in android studio go to:
1.Refactor/Migrate to AndroidX… ,
once you complete the task
2.on the bottom build click button -> Do refactor
3. build again

Sorry for asking here also what I want to know is how plugins are used from capacitor from: / src, when all resources are in src-capacitor.
I can’t access let’s say from: src / pagaes / Index.vue
import {Plugins} from “@ capacitor / core”

I must install all the capacitor resources again in the root of the Quasar project ??. Thanks for answering

metalsadman

@jpolstrre said in Latest Capacitor + AndroidX and cordova AdMob working with quasar.:

Sorry for asking here also what I want to know is how plugins are used from capacitor from: / src, when all resources are in src-capacitor.
I can’t access let’s say from: src / pagaes / Index.vue
import {Plugins} from “@ capacitor / core”

I must install all the capacitor resources again in the root of the Quasar project ??. Thanks for answering

You can use the forum’s search function or make a new thread if you don’t find one, anyway try the solution discussed here https://forum.quasar-framework.org/topic/5215/access-capacitor-api-from-store-action/3.

quebecstudio

Nice explanations! I finnaly had it working but is there a way to permanently set the meta-data in AndroidManifest.xml, build-gradle and AdMob.java, which are overwritten everytime quasar devis called?

Uneasy

I couldn’t find a way for that. I also couldn’t call quasar dev or anything related without refreshing gradle, however there is new capacitor implementation, which I didn’t try yet. new quasar app might work fine ?

quebecstudio

Anyway, it seems cordova-plugin-admob-free isn’t compatible with iOS because it still uses UIWebView… I had to remove it from my project.
I will try to find another way to have it working on both platforms.

Berkmann18

I followed the instructions for Capacitor but I’m still getting the Manifest merger failed when I run the quasar b -m capacitor -T android --ide command (the one without the --ide fails too).

kevinxu

Thanks for sharing，it help me a lot!

zios

there is no:
Now navigate to src-capacitor\android\capacitor-cordova-android-plugins\src\main\java\name\ratson\cordova\admob\AdMob.java file
and also there are none code line in my AndroidManifest.xml: <meta-data android:name=“com.google.android.gms.ads.APPLICATION_ID” android:value="$ADMOB_APP_ID"/>
where must i put this code ? if you make a video tutorial it would be very useful

No More Posting New Topics!

Latest Capacitor + AndroidX and cordova AdMob working with quasar.