Firebase Analytics Setup for Ionic V4

Ionic Native
1

So I am trying to set up Firebase Analytics for our app and it’s the last thing we need to do before launch. After a lot of trial and error from compatibility errors, I’ve managed to finally get it to compile successfully. However, when I run it to my device it returns a blank white screen, which in my experience with Ionic typically indicates a native plugin issue somewhere.

Using adb logcat on my Android device here is the error message I get:

Error Message:

java.lang.RuntimeException: Unable to get provider com.crashlytics.android.CrashlyticsInitProvider: io.fabric.sdk.android.services.concurrency.UnmetDependencyException: This app relies on Crashlytics. Please sign up for access at https://fabric.io/sign_up

This fabric.io/crashlytics error appears to show up continuously, however, I couldn’t find anything to set this up in the context of an Ionic V4 app using Firebase Analytics. Is there any way to either allow the app to ignore the crashlytics requirement entirely, or otherwise set up crashlytics?

Additionally, is there any explanation behind the compatibility issues that exist between Ionic V4 and the Firebase native plugin? From my experience, it seemed to take installing two patch plugins (androidx, androidx adapter), and a fork of the native plugin to finally get it to compile. It was a nightmare to deal with so if there are any clearer guides on that, that would also be highly appreciated.

Here are my Cordova and app information if any additional information is needed.

Cordova Information:

cordova-lib@9.0.1 with:
  cordova-common@3.2.0
  cordova-create@2.0.0
  cordova-fetch@2.0.1
  cordova-serve@3.0.0

Environment: 
  OS: darwin
  Node: v10.16.0
  npm: 6.9.0

Plugins:
  cordova-android-firebase-gradle-release
  cordova-android-support-gradle-release
  cordova-plugin-android-permissions
  cordova-plugin-androidx
  cordova-plugin-androidx-adapter
  cordova-plugin-camera
  cordova-plugin-crop
  cordova-plugin-device
  cordova-plugin-file
  cordova-plugin-file-transfer
  cordova-plugin-firebase
  cordova-plugin-firebasex
  cordova-plugin-ionic-keyboard
  cordova-plugin-ionic-webview
  cordova-plugin-splashscreen
  cordova-plugin-statusbar
  cordova-plugin-telerik-imagepicker
  cordova-plugin-whitelist

  ----------
  id: 1 or "android-26"
       Name: Android API 26
       Type: Platform
       API level: 26
       Revision: 2
  ----------
  id: 2 or "android-27"
       Name: Android API 27
       Type: Platform
       API level: 27
       Revision: 3
  ----------
  id: 3 or "android-28"
       Name: Android API 28
       Type: Platform
       API level: 28
       Revision: 6
  ----------
  id: 4 or "android-29"
       Name: Android API 29
       Type: Platform
       API level: 29
       Revision: 1

iOS platform:
  Xcode 10.3
  Build version 10G8

config.xml
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="5000" />
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <resource-file src="google-services.json" target="app/google-services.json" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
    </platform>
    <plugin name="cordova-plugin-device" spec="^2.0.2" />
    <plugin name="cordova-plugin-telerik-imagepicker" spec="^2.3.2" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
    <plugin name="cordova-plugin-crop" spec="^0.4.0" />
    <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^4.1.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.3" />
</widget>

EOF

package.json <<EOF
{
  "name": "TickCheckIDTest",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/android-permissions": "^5.10.0",
    "@ionic-native/camera": "^5.10.0",
    "@ionic-native/core": "^5.10.0",
    "@ionic-native/crop": "^5.10.0",
    "@ionic-native/device": "^5.10.0",
    "@ionic-native/file-transfer": "^5.10.0",
    "@ionic-native/firebase": "^5.10.0",
    "@ionic-native/firebase-analytics": "^5.10.0",
    "@ionic-native/image-picker": "^5.10.0",
    "@ionic-native/splash-screen": "^5.10.0",
    "@ionic-native/status-bar": "^5.10.0",
    "@ionic/angular": "^4.6.2",
    "cordova-android": "^8.0.0",
    "cordova-android-firebase-gradle-release": "^4.0.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-androidx-adapter": "^1.1.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-firebase": "^2.0.5",
    "cordova-plugin-firebase-analytics": "^3.0.0",
    "cordova-plugin-firebasex": "^6.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-support-android-plugin": "^1.0.1",
    "cordova-support-google-services": "^1.3.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.6.8",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.1.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-telerik-imagepicker": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-crop": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "Allows User to Take Photos of Ticks.",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "Allows User to Upload Photos of Ticks.",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-firebase": {},
      "cordova-android-firebase-gradle-release": {
        "FIREBASE-CORE": "17.0.0",
        "FIREBASE-ADS": "18.0.0",
        "FIREBASE-ANALYTICS": "17.0.0",
        "FIREBASE-APPINDEXING": "19.0.0",
        "FIREBASE-AUTH": "18.0.0",
        "FIREBASE-FIRESTORE": "20.0.0",
        "FIREBASE-FUNCTIONS": "18.0.0",
        "FIREBASE-MESSAGING": "19.0.0",
        "FIREBASE-STORAGE": "18.0.0",
        "FIREBASE-CRASH": "16.2.1",
        "CRASHLYTICS": "2.10.1",
        "FIREBASE-DYNAMIC-LINKS": "18.0.0",
        "FIREBASE-INVITES": "17.0.0",
        "FIREBASE-INAPPMESSAGING": "18.0.1",
        "FIREBASE-INAPPMESSAGING-DISPLAY": "18.0.1",
        "FIREBASE-ML-VISION": "21.0.0",
        "FIREBASE-ML-VISION-IMAGE-LABEL-MODEL": "18.0.0",
        "FIREBASE-ML-VISION-FACE-MODEL": "18.0.0",
        "FIREBASE-ML-VISION-OBJECT-DETECTION-MODEL": "17.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-LANGUAGE-ID-MODEL": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-TRANSLATE-MODEL": "20.0.0",
        "FIREBASE-ML-NATURAL-LANGUAGE-SMART-REPLY-MODEL": "20.0.0",
        "FIREBASE-ML-MODEL-INTERPRETER": "20.0.0",
        "FIREBASE-ML-VISION-AUTOML": "17.0.0",
        "FIREBASE-PERF": "18.0.0",
        "FIREBASE-DATABASE": "18.0.0",
        "FIREBASE-CONFIG": "18.0.0"
      },
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      }
    },
    "platforms": []
  }
}

Any input on this would be super appreciated as this app is expected to be finished soon! Thanks!!!

2

Hi @PatriciaCodes,

I spent the last couple of days on this, it looks that cordova-plugin-firebase && cordova-plugin-firebasex cannot live together,

I had to completely remove the all the plugins and then install only firebasex… however I encounter now problems like…

vendor.js:128834 Native: tried calling Firebase.onNotificationOpen, but the Firebase plugin is not installed.
pluginWarn @ vendor.js:128834
vendor.js:128846 Install the Firebase plugin: 'ionic cordova plugin add cordova-plugin-firebase'

I’m still working on it, if anyone else can get into this would be great…

Also have a look at Firebase App unable to Compile on Android with AAPT error

3

I figured it out.

A lot of the firebase compiling issues appears to lie in outdated Google/Gradle dependencies that have not yet been patched into the FireBase native plugin. I did not even have to use firebasex to get this working.

Here are how my Cordova plugins are set up now:

cordova-lib@9.0.1 with:
  cordova-common@3.2.0
  cordova-create@2.0.0
  cordova-fetch@2.0.1
  cordova-serve@3.0.0

Environment: 
  OS: darwin
  Node: v10.16.0
  npm: 6.9.0

Plugins:
  cordova-android-firebase-gradle-release
  cordova-plugin-android-permissions
  cordova-plugin-androidx
  cordova-plugin-androidx-adapter
  cordova-plugin-camera
  cordova-plugin-crop
  cordova-plugin-device
  cordova-plugin-file
  cordova-plugin-file-transfer
  cordova-plugin-firebase
  cordova-plugin-ionic-keyboard
  cordova-plugin-ionic-webview
  cordova-plugin-splashscreen
  cordova-plugin-statusbar
  cordova-plugin-telerik-imagepicker
  cordova-plugin-whitelist

iOS platform:
  Xcode 10.3
  Build version 10G8

Here are the steps:

  1. You MUST go into platforms/android and open build.gradle and update the following line:
        classpath 'com.google.gms:google-services:4.1.0'

TO

        classpath 'com.google.gms:google-services:4.2.0'
  1. You must then create a file in your android platform directory, and name it “build-extras.gradle”

You will then paste the following code in that file:

def dependencyMap = [
        "com.google.firebase:firebase-core": "16.0.8",
        "com.google.firebase:firebase-iid": "17.1.1",
        "com.google.firebase:firebase-messaging": "17.5.0",
        "com.google.firebase:firebase-config": "16.4.0",
        "com.google.firebase:firebase-perf": "16.2.4",
        "com.google.android.gms:play-services-tagmanager": "16.0.8",
        "com.google.firebase:firebase-auth": "16.2.0"
]

allprojects {
    repositories {
            google()
            jcenter()
            mavenLocal()
    }

    configurations.all {

        resolutionStrategy {

            eachDependency { DependencyResolveDetails details ->
                def group = details.requested.group
                def name = details.requested.name
                def fullName =  group + ":" + name
                print fullName
                if (dependencyMap.containsKey(fullName)) {
                    details.useVersion dependencyMap[fullName]
                }
            }
        }
    }

}
  1. Copy your build-extras.gradle to the root directory of your project so that you won’t lose the file when you need to re-compile.

I hope this is helpful and explains things!!!

1 Like
4

Thanks @PatriciaCodes, I hope the plugins just work soon… It looks they are working on it now,