Complete not getting called in Observable subscribe method

Question

I am working on the angular application and I am trying to use RxObservable. Below is the sample code.

getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    });
}

Now this is an angular 2 app (Single page application). When I reload the page, the complete part of above function gets called and this.accountDataLoaded is true.

However, If I move to other component and come back to this one, the complete is not getting called and accountDataLoaded stays false.

I see there's no error on the console as well since I am logging the error as you can see above.

I am thinking either filter or takeUntil function on that observable are causing that but I am not sure.

Answer 1

With RXjs behaviour complete is not been called if error is called. In your case you need do the following thing.

  getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    }).add(() => {
         //Called when operation is complete (both success and error)
    });
}