How to check for active subscriptions to observables to avoid memory leaks in Angular

Viewed 2196

I am using observables to get information from different sources via http. I understand that subscriptions to these observables are managed by Angular, so there is a low risk of memory leaks in that part. However, maybe I am a little paranoid, I am using the takeUntil() operator to guarantee the unsubscription to that observables. Furthermore, I am planning to make an intensive use of observables in other tasks like counters an detection of events. So I am a little worried about the active subscriptions that could cause any problem.

The system I am working in includes:

Angular CLI: 7.1.4
Node: 10.15.0
Angular: 7.1.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
Linux rdz1 4.15.0-43-generic #46-Ubuntu SMP Thu Dec 6 14:45:28 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

The components have code like this:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject} from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { QueryInvoiceService } from '../services/query-invoice.service';
import { RegInvoice } from '../classes/reg-invoice';

@Component({
  selector: 'app-detail-notes',
  templateUrl: './detail-notes.component.html',
  styleUrls: ['./detail-notes.component.css']
})
export class DetailNotesComponent implements OnInit {

    private ngUnsubscribe$ = new Subject();

    constructor(private queryInvoiceService: QueryInvoiceService) { }

    ngOnInit() {  }

    getInvoice(): void {
    this.queryInvoiceService.getInvoice(this.refInvNumber, this.refTo)
    .pipe(takeUntil(this.ngUnsubscribe$))
    .subscribe(
      (regInvoices: RegInvoice[]) => {
        this.regInvoices = regInvoices;
        console.log(regInvoices);

      },
      err => console.log(err)
      );
    }

    onClick(): void {
      console.log(this.refInvNumber);
      this.getInvoice();
    }

    ngOnDestroy() {
      this.ngUnsubscribe$.next();
      this.ngUnsubscribe$.complete();
    }
}

In this case, the subscription activates on click. Once the data transfer is complete, the subscription must be cancelled. For this purpose I am using the operator takeUntil() through a pipe.

Under these circumstances, I would like to know how can I check if active subscriptions remain outside the control of the components, and under what conditions there is a greater risk of this happening.

0 Answers
Related