1

I created two pages first one is listing & the second one is details page with mat-tabs. One of the tab contains web component(ViewComponent) created using angular/elements.

Following is the html for the details page.

<mat-tab-group>
<-- other tabs -->

    <mat-tab *ngIf="tabName === viewComp">
      <ng-template mat-tab-label>
        <span>{{ label }}</span>
      </ng-template>
      <ng-container
        *ngIf="loadedTabs.viewComp && apiSuccess"
      >
        <div *ngIf="testCondition">
          <-- ViewComponent is web component created using angular/elements -->
          <view-component
            [data]="viewCompData"
          ></view-component>
        </div>
      </ng-container>
    </mat-tab>
</mat-tab-group>

Now if I go back to listing page from details. ViewComponent still persist in memory following is screenshot of memory snapshot after garbage collection.

enter image description here

Now if I remove the div element with testCondition then in the retainers window its showing nameSpacesByHostElement instead of collectedLeaveElements.

enter image description here

Clicking on the top __ngContext__ in Detached HTMLElement@236587 jumps to following source - constructor of NgElementImpl.

enter image description here

Please let me know how can I remove ViewComponent permanently from memory. Using Angular(v10.2) / material components(v10.2).

Sumit M
  • 620
  • 5
  • 12
  • Can you try upgrading to a more recent version of angular. Have a look into https://github.com/angular/angular/issues/45080 as it might be related. It's indicating that there are ongoing revisions to Angular to surface in v14 and that some memory leak cause by Chrome is going to be fixed by v102 being released soon. – Thomas Urban May 18 '22 at 13:12

0 Answers0