Ionic page keeps reloading after Angularfire 2 subscription change

Ionic Framework ionic-v3
1

I don’t know if this is the intended behavior or if I’m missing something. Here’s the code:

ionViewDidLoad(){
  this.fbObs = this.af.database.object('foo');
  this.fbObs.subscribe(snap=>{
    // If snap.foo has changed do something.
 });

 console.log('Did load');
}

Every time snap.foo value changes, the page component reloads, ionViewDidLoad() is called again and you get another log “Did load”;

2

@fate, were you able to solve this? I have exactly the same problem. Everything works fine using ionic serve with a desktop browser but it does not work using real devices. In addition, everything works fine using real device and broke when I added the inappbrowser. I dont know what happened. I hope someone may notice this. TIA.

3

If anyone was able to resolve this, please share. Anyone please? Thanks!

4

It doesn’t happen to me… Can you reproduce it in a 1-page project?

5

My apology, I cant create it right now. I hope you understand. Anyway, I noticed that it happens when after I login in firebase and sets the root page to a page where it contains the tabs, that page loads twice. And if I update a User’s node using other device, the whole page on the first device reloads the third time even if the current tab is not the default. If I update a User’s node, it will repeat the same process over and over again. It happens only on a real device and works fine using Chrome.

6

You probably are not unsubscribing when the tabs change. So you end up with 3 competing subscriptions if you have 3 tabs. I don’t know exactly how tabs work, but with regular pages, you can avoid this by subscribing in ionViewWillEnter and unsubscribing in ionViewWillLeave.

7

Everything works fine unless I update a node User’s account. I have other list loaded on page and updating these lists does not reload the whole page which is correct. The only thing is the error comes up when updating only User’s node. Thank you so much for helping.

8

Are you subscribed to .valueChanges when you do the update?

9

No I am not subscribed.

10

Well, 99% it’s an issue in your code, because I use AF and it doesn’t happen to me. My guess is that you are subscribed to valueChanges or snapshotChanges and you don’t realize it.

11

Hi @AaronSterling. Thank you. I know that the problem is in my coding at first. This is my code before redirecting to page where it contains the tabs.

this.item = afd.object(`/users/${profile['id']}`, { preserveSnapshot: true });
			this.item.subscribe(snapshot => {
					if(snapshot.exists()) {  
						this.usersList.update(profile['id'], {
							id: parseInt(profile['id']),
							email: fs.email,
							first_name: profile['first_name'],
							last_name: profile['last_name'],
							profile_picture: profile['picture_large'].data.url
				          }).then(data => {
                             this.navCtrl.setRoot(Where The Tabs Are);
12
  1. You should seriously consider upgrading to the latest AngularFire. The new API is much cleaner than what you have to do there.
  2. Change
    this.item.subscribe
    to
    this.item.take(1).subscribe
    and see if the problem persists.
13

Thanks @AaronSterling. I tried but it did not continue to the supposed landing page when adding take(1). I also tried to log the error but nothing was logged.