Ionic2 with Real-time data not updating(firebase)

[iignatov]

Heads up: here’s the probable cause for the issues in beta.4 (details in the linked post):

@iignatov

I made some research about this problem and I found the following similar issues in the Angular 2 repo:

• Angular breaks silently, mysteriously if zone shim is loaded incorrectly
• Change detection not being triggered in third party Ajax callbacks

Therefore anyone using beta.4 should update to beta.6 where the issues are fixed:

@iignatov

the issue should be fixed by the following commits in beta.6:

• fix(): load es6-shim before angular2-polyfills
• fix(platform): fire cordova platform.ready using zone

However, there are still similar issues caused by a zone.js bug (details in the linked post):

@iignatov

The code looks OK. I guess that it might be something zone-related, e.g. like the following zone.js issue: Losing zone in RxJS and fetch. I’ll suggest you to check in which zone your code is being executed…

[jjdeu]

I can confirm that this solved the problem. For me, anyway
Removed the ngZone workaround and my app still works on the device. Great work!

[topman623]

Hi, I have one issue. when run typings install --save --ambient firebase, then display no dependencies.
Plz help me.

[vasanth19]

I am using ionic beta 7 and still the list does not refresh automatically. ChangeDetectorRef.detectChanges() fixed the issue. Thanks for posting it here.

[rapropos]

I think you’ve put a band-aid on a more serious wound. You are probably going to have other problems until you figure out what is really going on.

[vasanth19]

@rapropos

band-aid on a more serious wound. You are probably going to have other problems until you figure out what is really going on.

you were right rapropos. I had to remove the call to ChangeDetectorRef.detectChanges() as it was firing numerous times and making the application slow.
Is there any other solution for this?

[iignatov]

@vasanth19

Is there any other solution for this?

@vasanth19 In case that you updated your project from an earlier version of the framework I would suggest to check if you performed the update properly. If you missed something by the update, it might result in such problems. Check out the following post for more details:

Ionic2 load ion-toggle or ion-select at will from promise?

I believe that your problem might be caused by the following line in your app.ts: import 'es6-shim'; You need to remove this - check out the guide for updating to beta.6. I would also recommend you to use Node v4/v5 but not v6 because it’s not supported yet:

[vasanth19]

@iignatov

updated your project from an earlier version of the framework I would suggest to check if you performed the update properly. If you missed something by the update, it might result in such problems. Check out the following post for more detai

Hello iignatov,
I downloaded the fresh copy of ionic conference app and added my code into it. it already had the ionic beta 7 in it.

[Shprink]

I am having the exact same problem. Do you know why it works fine without the ChangeDetectorRef on browser but not on device?

[iignatov]

@vasanth19

I downloaded the fresh copy of ionic conference app and added my code into it.

Difficult to say without seeing the code, however I would suggest you to first update your project to beta.8 and check if the problem still exists.

[blakezeis]

Was there any update on this topic? I am seeing the same issue described here in Ionic 2.0.1 using latest Firebase and latest Angularfire2. I have tried to update an Angularfire list and also used a firebase.ref().on, but neither way updates without interacting with the UI first. I’m using limitToFirst(limit), then trying to update the limit to increase the number of values in my array.

initializePhotos(limit){
  	this.albumRef = firebase.database().ref('/Weddings/0/weddingAlbums/' + this.album.$key + '/albumPhotos').limitToFirst(limit);
  	this.albumRef.on('value', photoList => {
  	let photos = [];
  		photoList.forEach( photo => {
    		photos.push(photo.val());
  		});
  		this.photoList = photos;
  	});
  	return this.photoList;
  }

  loadMorePhotos(limit){
	this.limit = this.limit + limit;
	this.initializePhotos(this.limit);
  }

[gerardx20]

i had the same issue, can you see the change in console log?, if so, I solved it using ngzone