angular httpclient observables not unsubscribing automatically

Question

I am performing a http call and subscribing to it. If I close that component, the subscription is not destroyed, and it runs once. Shouldn't the http subscriptions be removed automatically once I destroy a component?

Here's the method that is being called

getCubes() {
    this.loading_cubes = true;
    this.urlService.getCubes().subscribe({
      next:(data:any) => {
        if (data.success) {
          this.cubesDataArray = data.data[0].response;
        } else {
          Swal.fire(data.status_message);
          console.log(data.error_message);
        }
        this.loading_cubes = false;
      },
      error:(err:any) => {
        console.log(err);
        Swal.fire('Opps an error occured');
        this.loading_cubes = false;
      }
    });
  }

And here's the service function that's returning the http observable.

 getCubes() {
    return this.http.get(this.serviceURL + '/cubes', this.options);
  }

This is just an single case, It's happening with every req I make. The pop ups keep coming up even after I closed the component.

Also it it possible that it is some setting in the tsconfig.json?

Answer 1

You'll have to hook into the onDestroy to remove your subscription:

export MyComponent extends OnDestroy {
    mySubscription = null
    ...

    getCubes() {
        this.mySubscription = this.urlService.getCubes().subscribe({
            ...
        });
    }
    ngOnDestroy() {
        this.mySubscription.unsubscribe();
    }   
}