Firebase realtime database not working on Ionic iOS in real build but works in live reload

Question

I have a wired situation, been struggling for a while on this.

I have implemented inApp chat using Firebase real-time database, This solution is working fine in Android both live reload mode and build mode, and also works in live reload (ionic cordova run ios -l --external) mode in iOS, but does not work when the application is built. ionic cordova build ios

I am testing this on same device and same code, but fails in build mode.

On debugging a lot, I found an error that is shown in the console when the firebase database call is made, but i am not sure what is the problem and where exactly it is.

[Error] ERROR – Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'BuildInfo.packageName')
attachCallbackListeners@ionic://localhost/vendor.js:116999:39
@ionic://localhost/vendor.js:116900:39
generatorResume@[native code]
asyncGeneratorStep@ionic://localhost/vendor.js:212788:24
_next@ionic://localhost/vendor.js:212810:27
@ionic://localhost/vendor.js:212817:12
ZoneAwarePromise@ionic://localhost/polyfills.js:1419:37
@ionic://localhost/vendor.js:212806:23
generatorResume@[native code]
asyncGeneratorStep@ionic://localhost/vendor.js:212788:24
_next@ionic://localhost/vendor.js:212810:27
run@ionic://localhost/polyfills.js:166:49
@ionic://localhost/polyfills.js:1308:39
runTask@ionic://localhost/polyfills.js:210:57
drainMicroTaskQueue@ionic://localhost/polyfills.js:614:42
invokeTask@ionic://localhost/polyfills.js:523:40
Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'BuildInfo.packageName')
attachCallbackListeners@ionic://localhost/vendor.js:116999:39
@ionic://localhost/vendor.js:116900:39
generatorResume@[native code]
asyncGeneratorStep@ionic://localhost/vendor.js:212788:24
_next@ionic://localhost/vendor.js:212810:27
@ionic://localhost/vendor.js:212817:12
ZoneAwarePromise@ionic://localhost/polyfills.js:1419:37
@ionic://localhost/vendor.js:212806:23
generatorResume@[native code]
asyncGeneratorStep@ionic://localhost/vendor.js:212788:24
_next@ionic://localhost/vendor.js:212810:27
run@ionic://localhost/polyfills.js:166:49
@ionic://localhost/polyfills.js:1308:39
runTask@ionic://localhost/polyfills.js:210:57
drainMicroTaskQueue@ionic://localhost/polyfills.js:614:42
invokeTask@ionic://localhost/polyfills.js:523:40resolvePromise — zone.js:1213resolvePromise — zone.js:1167(anonymous function) — zone.js:1279onInvokeTask — core.js:28659runTask — zone.js:178drainMicroTaskQueue — zone.js:582promiseReactionJob
    defaultErrorLogger (vendor.js:54029)
    handleError (vendor.js:54077)
    next (vendor.js:76833)
    next
    __tryOrUnsub (vendor.js:207784)
    next (vendor.js:207723)
    _next (vendor.js:207673)
    next (vendor.js:207650)
    next (vendor.js:207434)
    emit (vendor.js:73485)
    run (polyfills.js:166)
    onHandleError (vendor.js:76248)
    runGuarded (polyfills.js:179)
    (anonymous function) (polyfills.js:1106)
    drainMicroTaskQueue (polyfills.js:621)
    promiseReactionJob

the code that triggers the call to firebase rdb

  this.db.database.ref(this.messageMetaData.fireBaseString).orderByChild('date')
      .on('value', async (resp) => {
        this.messageList = snapshotToArray(resp);
        await this.iterateImages();
        this.loading = false; 
        if (this.playSound != false) {
          this.playChatSound();
        }
        this.playSound = true;
        setTimeout(() => this.content.scrollToBottom(100));
      });

I have tried to add error statements but I don't see any other error. Seen suggestion or solutions on to proceed.

Plugins used

"       @angular/fire": "^7.0.4",
        "firebase": "^9.0.2",
        "angularfire2": "^5.4.2",
        "firebase-tools": "^7.12.0",

Ionic info

Ionic:

   Ionic CLI                     : 6.17.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.9.3
   @angular-devkit/build-angular : 12.2.5
   @angular-devkit/schematics    : 11.2.14
   @angular/cli                  : 12.2.5
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 29 other plugins)

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.5.0) : 1.4.0

System:

   Android SDK Tools : 26.1.1 (/Users/saikiran/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v14.18.0 (/usr/local/bin/node)
   npm               : 6.14.15
   OS                : macOS Monterey
   Xcode             : Xcode 13.2.1 Build version 13C100

Answer 1

Finally, it magically worked when I updated angular 11 to 12. Not sure specific about what fixed the issue. –

Answer 2

I am not an ionic person, but according to the error:

undefined is not an object 

You're trying to pass undefined instead of an object {}. I imagine either this.messageMetaData.fireBaseString is undefined or resp is undefined.

Check the first variable, and you could try this for the second:

.on('value', async (resp) => {
  if (resp) {
    ...
  }
  ...
});

FWI:

I think you need to update:

"angularfire2": "^5.4.2",

This package doesn't even have the same name anymore.