Ionic 3 NavController does not pop the view instead creates a new one

Question

The ionViewDidLoad function seem to get called twice, which is causing multiple views being created of AddressPage. I have debugged this and it looks like whenever data is updated the new instance of view gets created. This behaviour seems to happen only when I use fireabse to save the address. If I comment out the code to save the address new view is not created and app navigates to previous screen. Any way to avoid this?

I have tried ViewCotnroller.dismiss() and NavController.pop() inside saveAddress method but non seem to avoid creation of new view.

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar) {

    platform.ready().then(() => {

      statusBar.styleDefault();
      statusBar.backgroundColorByHexString('#1572b5');
    });

  }

}

Home Page

import {NavController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public firebaseProvider: 
     FirebaseProvider) {
  }

 //navigate to different view
 navigate(){
    this.navCtrl.push(AddressPage, {address:newAddress});
 }

}

Address Page

import {NavController } from 'ionic-angular';
@Component({
  selector: 'page-address',
  templateUrl: 'address.html'
})
export class AddressPage {

   constructor(public navCtrl: NavController, public firebaseProvider: 
    FirebaseProvider, private navParams: NavParams) {
    this.addressKey = this.navParams.get('key');
   }

   ionViewDidEnter(){
      //load some data from server
   }

   saveAddress(){
     //save data to server
     this.firebaseProvider.saveAddress(newAddress);
     //move back
     this.navCtrl.pop();

   }

}

Firebase provider that uses AngularFireDatabase

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseProvider {

  constructor(public afd: AngularFireDatabase) { }


  saveAddress(address) {
     this.afd.list('/addresses').push(address);
  }

  updateAddress(key,dataToUpdate){
     return this.afd.list('addresses').update(key,dataToUpdate);
  }

}

I have also tried this but it has the same issue.

 this.firebaseProvider.saveAddress(newAddress).then(result => {
       // loadingSpinner.dismiss();
        this.navCtrl.pop();
      });

this.firebaseProvider.updateAddress(this.addressKey, updateItems)
        .then(() => {
         //   loadingSpinner.dismiss();
            this.navCtrl.pop()
     });

The HTML of save button

  <button type="button" ion-button full color="primary-blue" (click)='saveAddress()'>Save</button>

Answer 1

Looks like unsubscribing to the subscribers fixes the issue. The HomePage view had subscribers which were not unsubscribed. I added the Observable Subscriptions into the array and unsubscribed as per code below.

  ionViewWillLeave(){
    this.subscriptions.forEach(item=>{
      item.unsubscribe();
    });
  }