Latest Capacitor + AndroidX and cordova AdMob working with quasar.



  • 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.



  • Thx for sharing.



  • 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



  • @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.



  • 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?



  • 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 ?



  • 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.


Log in to reply