I am experiencing a slow but continual memory leak in my angular app when it is running in Chrome on Android or when running in Chrome on Windows in responsive mode (dev tools).
The problem is reproducable in any angular application it seems. So the example below is from visiting https://angular.io/.
Steps to reproduce are:
- Open Chrome dev tools and turn on responsive mode
- Navigate to https://angular.io/ (Take note of the DOM Node count in the dev tools)
- Click the menu
- Click "Tutorials" -> "Tutorial: Tour of Heroes" -> "5. Add Navigation"
- Click "Tutorials" -> "Tutorial: Tour of Heroes" -> "6. Get Data from a Server"
- Repeat steps 4 and 5 a bunch of times
- Click the angular icon at the top of the screen to return to the main page
- Perform a GC and check the DOM node count
Expected outcome
DOM nodes should be garbage collected regularly. After a manual GC DOM node count should return to the original value from step 2 (or very close to it).
This test was performed in Chrome for Windows (v99.0.4844.51) with responsive mode off.
Actual outcome
DOM nodes are never garbage collected. Thus the JS heap size continually increases slowly. As you can see I'm over 200k DOM nodes just from navigating between these two links. This test was performed in Chrome for Windows (v99.0.4844.51) with responsive mode on.
The big problem here is that the app we have runs primarily on Android tablets and this behaviour is what we are seeing on the tablets all the time. Eventually it causes the app to crash.
I've actually had to add a force refresh into the app at certain intervals to stop the app from just hard crashing but, this is not always enough to stop the app from crashing.
It seems certain components are more likely to cause this problem than others but, I have not been able to identify a root cause.
Another example can be found here: on this stackblitz
I'm not sure if this is a bug in Angular / Chrome or is there something else going on that only occurs on mobile/responsive mode for Chrome?