Angular: Garbage collection Components

Question

I try to understand how the GabageCollector works after a component was destroyed. I have the following case:

AppComponent:

export class AppComponent {
  testCompoments = [1,2];

  removeOne(id){
    this.testCompoments.pop()
  }

  nop(){

  }
}

AppHTML:

<ng-container *ngFor="let t of testCompoments">
  <app-test [id]="t" (close)="removeOne($event)"></app-test>
</ng-container>
<br>

EMPTY FN

TestComponent:

export class TestComponent implements OnInit {

  @Output()
  public close = new EventEmitter()

  @Input()
  id;

  constructor() { }

  ngOnInit() {
  }

  closeClick(){
    this.close.emit(this.id)
  }

}

TestHTML:

<p>{{id}}</p>
<button (click)="closeClick()">close</button>

Now when i start the app and take a heap-snapshot i see the right amount of objects in memory:

Then i remove a component by clicking the close-button and take a new snapshot:

To my surprise, there are still two objects? And now additionally the strange thing is, if i click the "EMPTY FN" button, which does nothing (empty-function on app-component), the next snapshot looks like this:

I have a few questions about this topic:

• How the GC works in detail? For my special case i think the GC cant free the memory because there is still a reference to that object. How to find out where this reference lives?
• Why the GC isnt invoked after the first component is removed, but called if the empty function is called afterwards?
• Do i have to care about this "dead" object (assume the testcomponent subscribes to a few observables but unsubscribe them properly via async-pipe or in ngOnDestroy) ?

Answer 1

It seems Chrome keeps one instance in memory for ngFor. Memory leak isn't as severe as it would seem.

https://angular-garbage-collection-components.stackblitz.io/

By comparing snapshots on Chrome:

• clicking the last "close" it will remove the element from DOM but keep that in the memory for some odd reason.
• clicking the first "close" it will remove the element from DOM and no memory leak happens.
• removing the last TestComponent by clicking "close" will leave one TestComponent in the memory.
• The TestComponent count in the memory never exceeds one over the items in the DOM.
• When I add new TestComponents the extra item is cleaned up & there is no detectable memory leak.

Code for reference: https://stackblitz.com/edit/angular-garbage-collection-components