I am currently noticing memory leaks in the platform that me and my team are developing, I tried the following:
1-Added TrackBy() in the ngFor loops.
2-Tried to use async when possible on ngIf and ngFor.
3-Added .TakeUntil() before .subscribe() and in ngonDestroy() added x.next(); x.complete();.
4-Added clearTimeout in ngOnDestroy().
5-Added nullified all references, childs and any variable in the ngOnDestroy() as follow: this.y = null;.
6-Added 'use strict' tag on all methods in the .ts files (to notify for accidental global variables).
7-Added 'var' instead of 'let' for the garbage collector to detect the references that are not used and destroy them.
8-Removed all circular dependencies found in the code.
PROBLEM: DOM Nodes increasing on open of page
RESOLVED: memory leaks in JS ~ Resolved
IONIC INFO:
cli packages:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 9.0.0 ([email protected])
local packages:
@ionic/app-scripts : 3.2.2
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.9
System:
Node : v8.8.1
npm : 6.11.3
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
DESCRIPTION:
Did not get any results related to the DOM Nodes. The JS heap size and JS listeners are being cleaned (no memory leaks in anything related to JS) I think.
But even when the JS heap size is being cleaned the DOM Nodes are still increasing on open of another page (not page with history, a new page) the ngOnDestroy is being called but the DOM Nodes are increasing.
1-I tried using heap snapshot to detect from where is the memory leak but did not arrive to anything (). screenshot1 HERE,screenshot2 HERE
2-I tried using Allocation instrumentation on timeline did not arrive to anything.
3-I tried using Allocation sampling also did not arrive to anything.
The only thing I found is that, what is causing the DOM Nodes to increase on open of a new page is Detached Nodes. But nothing after that on how to clear them.
HYPOTHESIS:
What I think is happening:
1- Even when DOM Nodes is destroying components and ngOnDestroy() is called memory is not being released which means DOM Nodes are increasing.
2- ngOnDestroy() is being called after DOM Nodes destroy component or page (Did not find any way to check if ngOnDestroy() is called before or after DOM Nodes destroy component).
Can anyone help me with this? or has any points that could help me detect and resolve DOM Nodes memory leaks?
P.S: If anyone needs any more details please mention it in the comment so that I can provide more information.