Memory leak - Browser hangs

[prashantchavan85]

Describe the bug which template:

• [ X] MaterialDesignFrameworkModule — Material Design
• [ X] Bootstrap3FrameworkModule — Bootstrap 3
• [ X] Bootstrap4FrameworkModule — Bootstrap 4
• [ X] NoFrameworkModule — plain HTML
• [ ] Other (please specify below)

A clear and concise description of what the bug is.

If you open the application in multiple tabs (opened for different environment for testing) and keep working on it for long time without closing your browser eventually it page hangs and have to close all the browser window and relaunch.

Looks like this component accumulates more and more memory on every refresh.

To Reproduce Steps to reproduce the behavior:

1. Go to https://hamidihamza.com/ajsf/
2. Select any example and leave the default settings as it is.
3. Open chrome dev tool and from settings > more tools > performance monitor
4. Check initial count of DOM Nodes, JS Event Listeners, Documents
5. Click refresh on the browser and notice that each time DOM Nodes and JS Event Listeners are increasing.

Expected behavior

Expected that DOM Nodes and JS Event listeners should not accumulate after every refresh and avoid memory leak and browser hangs.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [windows, iOS, any]
• Browser [chrome, edge, any]
• Version [98, any]

Log output covering before error and any error statements

Insert log hereCopy

Additional context

Detailed Description

Context

Possible Implementation

[Thorski]

Try closing devtools and reopening it. Devtools prevents or at least inhibits some garbage collection I believe.