ChangeDetection with Firebase using nativescript-plugin-firebase


#1

Hello!

I’m new to NativeScript and Im trying to use NativeScript (with Angular2) together with Firebase using nativescript-plugin-firebase. When using “addChildEventListener” to listen for data changes from Firebase I must manually trigger change detection in the callback function to make the UI re-render. Anyone know a way around this problem?

ngOnInit() {
    this.isLoading = true;

    firebase.addValueEventListener(snapshot => {
      this.isLoading = false;
      this.todos = snapshot.value;
      this.cdr.detectChanges(); // Can I avoid this somehow?
    }, '/lists')
      .then(listenerWrapper => {
        this.listeners = listenerWrapper.listeners;
      }
    );
  }

#2

hi, you are going to want to use ngZone. There’s a video on this at http://www.nativescriptsnacks.com. I also have several examples of using Firebase with :nng: - http://pocketrave.me is one. On my github, check out http://www.github.com/jlooper/pocketrave or http://www.github.com/jlooper/practicebuddy-web-mobile or for a simpler example https://github.com/jlooper/giftler


#3

Thanks, this was exactly what I was looking for!


#4

@hazmah0 hopefully you found it:
http://www.nativescriptsnacks.com/videos/2016/06/13/zoned-callbacks.html

I noticed when searching for ngZone on nativescriptsnacks it didn’t find it.

@jen.looper we may can add ngZone in the title or description to allow a search for ngZone to find that video :thumbsup:


#5

Yeah, thats the video I watched. I did a search for “zone”.


#6

2017-02-07 11:34:31.405066 Hieber[896:50711] CONSOLE LOG file:///app/shared/login.service.js:171:24: *********************************** error @ addOnMessageReceivedCallback: Enable FIRMessaging in Podfile first
CONSOLE LOG file:///app/shared/login.service.js:171:24: *********************************** error @ addOnMessageReceivedCallback: Enable FIRMessaging in Podfile first
2017-02-07 11:34:31.414611 Hieber[896:50711] CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3472:32: EXCEPTION: Uncaught (in promise): Enable FIRMessaging in Podfile first
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3472:32: EXCEPTION: Uncaught (in promise): Enable FIRMessaging in Podfile first
2017-02-07 11:34:31.415003 Hieber[896:50711] CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3477:36: ORIGINAL STACKTRACE:
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3477:36: ORIGINAL STACKTRACE:
2017-02-07 11:34:31.420500 Hieber[896:50711] CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3478:36: resolvePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:416:40
file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:393:27
file:///app/tns_modules/nativescript-plugin-firebase/firebase.js:129:15
ZoneAwarePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:465:37
addOnPushTokenReceivedCallback@file:///app/tns_modules/nativescript-plugin-firebase/firebase.js:126:21
test@file:///app/shared/login.service.js:159:48
login@file:///app/shared/login.service.js:177:18
login@file:///app/login/login.component.js:44:31
submit@file:///app/login/login.component.js:34:19
handleEvent_36
file:///app/tns_modules/@angular/core/bundles/core.umd.js:12774:45
[native code]
file:///app/tns_modules/nativescript-angular/renderer.js:213:31
invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:190:33
onInvoke@file:///app/tns_mod
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3478:36: resolvePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:416:40
file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:393:27
file:///app/tns_modules/nativescript-plugin-firebase/firebase.js:129:15
ZoneAwarePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:465:37
addOnPushTokenReceivedCallback@file:///app/tns_modules/nativescript-plugin-firebase/firebase.js:126:21
test@file:///app/shared/login.service.js:159:48
login@file:///app/shared/login.service.js:177:18
login@file:///app/login/login.component.js:44:31
submit@file:///app/login/login.component.js:34:19
handleEvent_36
file:///app/tns_modules/@angular/core/bundles/core.umd.js:12774:45
[native code]
file:///app/tns_modules/nativescript-angular/renderer.js:213:31
invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:190:33
onInvoke@file:///app/tns_modules/@angular/core/bundles/core.umd.js:4391:47
invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:189:42
run@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:83:49
zonedCallback@file:///app/tns_modules/nativescript-angular/renderer.js:212:27
notify@file:///app/tns_modules/tns-core-modules/data/observable/observable.js:149:31
_emit@file:///app/tns_modules/tns-core-modules/data/observable/observable.js:168:24
tap@file:///app/tns_modules/tns-core-modules/ui/button/button.js:21:24
UIApplicationMain@[native code]
start@file:///app/tns_modules/tns-core-modules/application/application.js:251:26
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:68:28
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:56:26
anonymous@file:///app/main.js:5:57
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
2017-02-07 11:34:31.431854 Hieber[896:50711] CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:342:26: Unhandled Promise rejection: Enable FIRMessaging in Podfile first ; Zone: angular ; Task: null ; Value: Enable FIRMessaging in Podfile first undefined

Getting this error in Plugin Firebase


#7

First: based on your consolelog you should see that you got your answer inside of it “addOnMessageReceivedCallback: Enable FIRMessaging in Podfile first” so uncomment it inside Podfile inside plugin and run ios again and it should work
Second Please avoid offtopic question inside topics but create new question :slight_smile: it will be easier to answer from others and find answer for your question later in case you will want to find solution :slight_smile: