Ionic2 with Real-time data not updating(firebase)

@YourPrivateCoder

I tested this out on and I could get it working on the ios emulator, but It wouldn’t update live on my actual phone :frowning: I had to do the same thing as before when relaying on angulars built-in change detection, which was click on another button to change the dom - then the data shows up. I really think there are two issues going on with the ios phones. First you have to listen for changes in the data(observables), and then you have to make sure the dom makes a change after your data has come in(directive), because Angular2 auto change detection doesnt seem to be aware of the data change once inside the ios phone environment…have you had different results on an actual ios phone?

Cheers,
S

1 Like

Hi @spencerJS , I am actually working on Android and this logic works well for me. Also try updating all libraries and ionic cli to latest.

But look my code above, I edited and added NgZone, it’s similar to $scope.$apply() as in Angular 1 and this might solve your problem. I have one usecase when one of my third party library calls event on document.addEventListener() and I have to use this to get the zones working.

Run “ionic info” command line

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS: Windows 8.1
Node Version: v4.2.6

I have implemented a solution here with AngularFire and it seems to work fine

1 Like

Hey @YourPrivateCoder thats good to hear! I also had to implement NgZone. Thanks so much for posting the info on your install plus code.

@aaronksaunders Very cool to see angularfire in the field. I’m wondering if part of the issue I was having was not using angularfire. Thanks for posting that link, def going to dissect it.

@spencerJS I have a non angular fire example posted in my repo also https://github.com/aaronksaunders/ionic2-firebase-sample

@aaronksaunders thank you very much for posting your AngularFire2 solution. It helped me convert my sample app to use this approach now.

I do have one question (and forgive me if it sounds stupid) but what commands do you need to run to update both Firebase and AngularFire2 in your solution whenever they come out with newer versions?

npm install would be needed to update the packages for angularFire example. and the non-angularFire example you would need to update the URL in index.html to reflect the new version

+1

Is it because there is a new Angular 2 way to handle this situation? If so, why would it work on the web, but not on the emulator/device.

1 Like

@doorty - I havn’t hooked up the actual angularfire2 library yet, but I’m skeptical it would fix the issue although I can’t wait to test it out. My thinking is the reason that there is this discrepancy in the UI, is once the app is on a device, its technically no longer in a browser environment. Because of this we can’t 100% relay on everything that we take for granted in a browser. This is where the magic of ionic has come in - they have done an amazing job letting us basically program the same way we would as if we are in a browser. So while we have like 80 or 90% of the functionality we are used to in a browser, there will be a small percentage of things that take a little extra work to figure out. Thats my opinion but I’d love to hear what anyone else thinks.

It could also just be as simple as Ionic 2 and angular and angularfire are all in beta/alpha haha

@spencerJS has this been confirmed as a bug? It would be nice to have an issue that we can track to see if/when it will be fixed.

I thinks this issue covers the bug https://github.com/driftyco/ionic/issues/5885.

Looks like it’s been fixed for next release, though I’m not sure how to update my project to v2.0.0-nightly to confirm.

I’m running into this same problem, even when I dont use Firebase but just mock data from a service.
As soon as I deploy to a device the digesting of the mock-data only takes place after a user-action (like SpencerJS writes in his first post).
Is there any progress on this issue?
Doorty, did you manage to use the nightly build in your project? I’m curious to see if the issue you mentioned does indeed solve it.

My only solution so far is wrapping the property with NgZone like you would with $scope.$apply in Ionic 1.

Yes, using NgZone fixed it for me too, for now. Thanks for the suggestion, doorty!

@aaronksaunders Hi - have you tested ionic2-firebase-sample on a real device? I have tried using your approach and it works fine in the browser but suffers from the same problem @spencerJS originally reported when run on the device - with the update not being displayed in the UI until a control is tapped.

Today I downloaded ionic2-firebase-sample and tried to run it on a iphone device - when the app started it gave me a white screen. Have you successfully tested this project on a device? The issues in this thread is specifically about not getting UI updates on a device . For some reason all works fine when running ionic serve and testing via the browser.

I also noticed that you are using an angular async pipe in the angular ionic2-angularfire-sample but not in ionic2-firebase-sample - would you mind elaborating on the reasoning behind this?

Also tried to run the ionic2-angularfire-sample example but I got the following error when trying to install:

npm WARN angularfire2@2.0.0-alpha.16 requires a peer of angular2@>=2.0.0-beta.14 <2.0.0-rc.1 but none was installed.
npm WARN fbtest@ No repository field.
npm WARN fbtest@ No license field.

typings install angularfire2 --save --ambient

typings ERR! message Unable to find "angularfire2" ("dt") in the registry. Did you want to try searching another source?Also, if you want contribute these typings, please help us: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/dt/angularfire2/versions/latest responded with 404, expected it to equal 200

@malma67 let me update the project to the latest and get back to you?

@malma67 You are seeing a white screen because you need to configure your own firebase account… and you will need to do npm install after checking out the project.

I just rebuilt this project and tested on my iphone6+S and it works fine

I had the same issue! Updating the array by pushing new items would not refresh the view until I did some kind of interaction (like changing to another tab and then coming back to the list tab). After hours of frustration, this helped:

Specifically, ChangeDetectorRef.detectChanges()

Hope this helps.

1 Like

@kidproquo @aaronksaunders

I think that the issue has now been fixed by upgrading to ionic2 beta 6. There should be no need to do change detection manually or use ng zone anymore. follow the instructions ionic have published for the upgrade.