Memory leak on ngx bootstrap modal component

[rahulz-wasnik]

Bug description: This is infact a simpler version of the example used to open a component using ngx bootstrap modal given under the component section on this link. https://valor-software.com/ngx-bootstrap/#/modals

In my example I am using the ngx bootstrap modal to open a Confirm Component. Open the StackBlitz in chrome and under the developer tools, navigate to the memory tab and take a heap snapshot without clicking on the open button. Now click the open button 3 times and take a heap snapshot again. Compare the two snapshots and search for ConfirmComponent, ModalBackdropComponent and ModalContainerComponent. There are 3 instances of each. These keep increasing in count as the open button is clicked. Even if the garbage collection is run they are not deleted.

Also the number of detached html elements keep on increasing in size with every click.

StackBlitz that reproduces the issue: https://stackblitz.com/edit/angular-ivy-17kffn https://angular-ivy-17kffn.stackblitz.io/

[bravier]

Hi,

Thanks for opening this issue @rahulz-wasnik!

We are also impacted by this memory leak in our app. Version 6.0.0 of ngx-bootstrap looks not to be affected, only 6.1.0 & 6.2.0 are.

Context:

• ngx-bootstrap 6.1.0 & 6.2.0
• Angular 11

I'd be happy to help fixing it, don't hesitate to ask if you guys need more informations / testing.

Thank you!

[rahulz-wasnik]

Thank you. Yeah it be good to have this fixed in 6.1.0 & 6.2.0.

[derfritz]

Hi, any news on this issue? We are affected by this issue as well, can provide a PR if that helps :)

[dianabarsan]

We're interested in having this fixed as well. https://github.com/valor-software/ngx-bootstrap/issues/5971#issuecomment-732296449

[daniloff200]

@derfritz that will be awesome !

[nielswitte]

Any update on this or even a workaround?

[sherlock1982]

The issue still persists. Any dialog open is a leak.

[cgcdoss]

Any news about this? Still happening:

It only takes is a simple script like this to flood memory with duplicate instances:

let i = 0;
for (let t of Array(30).fill('')) {
    setTimeout(() => {
        document.querySelector('demo-modal-service-component button').click();
        setTimeout(() => document.querySelector('.modal.fade.show .modal-header .btn-close').click(), 250);
    }, 350 * i);
    i++;
}