Unfreed subscribers in memory

Question

I am currently using Angular v5 with rxjs v.5.5.6.

I want to reduce the memory leak in my angular 5 component. I have implemented the "official" recommended strategy, by piping in takeUntil(this.destroy$) before each subscribe.

   import {takeUntil} from 'rxjs/operators';
   import { Subject } from 'rxjs/Subject';
   ...
   private destroy$ = new Subject();
   ... 

   // sample subscriber
   this.adminService.GetCompanySettings('potatoCorp').pipe(
    takeUntil(this.destroy$)
   ).subscribe(res => {}, null, null);

   // sample mergemap combinator
   this.basicMemberService.currentMember.pipe(
     mergeMap(currentMember => { 
     // do some internal logic
     return this.utilityService.getMemberInfo(currentMember.Id)/* 'Tried this'.pipe(
    takeUntil(this.destroy$))
    */
    }),
     takeUntil(this.destroy)
    ).subscribe(result => {
      // do something here
    }
)


   ngOnDestroy() {
   this.destroy$.next();
   this.destroy$.complete();

I tried adding the pipe(takeUntil) strategy to the returned observable in the mergeMap, but it had little to no effect.

The first one is made from just staying at the homepage. The second is made after going into memberDetails, then returning to the homepage.

Why are so many subscribers (of various types) retained in memory? At the moment the heap increases with around 5 MB every time the user does the most basic of operations.

Unfreed subscribers in memory

0 Answers0