Angular Component is not deallocated when referenced as ViewChildren

I have a parent component that shows a map child component. Due to loading time map only appears when images are available. So I have used QueryList to get the component and convert it to a rxjs subject and use it in rest of the component to execute logic.

However, this child component is still in memory even if I navigate to a different page. If I go away and come back multiple times I see MapComponent increasing in the memory snapshot. This is a memory leak because components and their child components are accumulating without getting garbage collected.

I check ngOnDestroy is called in both components when I move a way.

Is there a way to avoid this?

@ViewChildren("map") mapQueryList: QueryList<MapComponent>;
private readonly mapComponent$ = new BehaviorSubject<MapComponent>(undefined);

ObservableFromQueryListFirstElement(this.mapQueryList)
.pipe(
takeUntil(this.destroyed$)
)
.subscribe(component => {
this.mapComponent$.next(component);
});

Continue reading...