Angular Memory leak

[jrebecchi]

Subject of the issue

There is a memory leak with GridStack when you rerender it on Angular.

Capture.video.du.02-08-24.15_13_56.mp4

Your environment

• version of gridstack.js - 10.3.1-dev
• Browser: Firefox v128.0.3 | Chrome v127.0.6533.72

Steps to reproduce

I did this PR where I adapted the Angular demo to reproduce it

[godind]

I see the same problem with my project. It's pretty severe if your app repeatedly load grid items. Like swapping from dashboard to dashboard, which in my app is done constantly.

I use latest grid stack and latest Chrome, Safari and Chromium browser. Present on all.

Angular CLI: 18.2.1
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 18.2.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1802.1
@angular-devkit/build-angular 18.2.1
@angular-devkit/core 18.2.1
@angular-devkit/schematics 18.2.1
@angular/cli 18.2.1
@schematics/angular 18.2.1
ng-packagr 18.0.0
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.10

[adumesny]

you guys need to give me a simple example to reprodude... the above review has a widget with hundreds of nested div and not clear why it changed so much code... I don't want to debug your issue.

does it happen when you call load(layout1) + load(layout2), or without removeAll() in between ?
does it happen without Angular code ?

[adumesny]

[godind]

In my case I call this every time I load a new layout. No removeAll() prior

protected loadDashboard(): void {
    const dashboard = this.dashboard.dashboards()[this.dashboard.activeDashboard()];
    this.gridstack.grid?.load(dashboard.configuration as NgGridStackWidget[]);
  }

[adumesny]

I'm not able to see my code showing the diff in the 2 sample (loading + clearing the grid). All seem to be 'code' compiled which I do not understand. Closing.