10

I am facing memory leak issue in angular js application. I have tried all the possible solutions like profile tool, timeline and some other tools related to angular js. My Work till now -

Profile Tool

In profile tool JS heap is keep on getting increased but can't able to find the reason for it. Detached dom element keep on increasing

Timeline

It shows there is a possibility of memory leaks but still I don't know how to debug and fix it.

enter image description here

Task Manager

It keep on increasing the memory size.Some time it is getting garbage collected but not significantly. enter image description here

Please let me know how to debug and find out what could be the issue.Or share your experience if you have faced the same issue.

Vaibhav Shah
  • 538
  • 3
  • 16
  • 1
    can you post related code ? or any plunker wud be great ! along that can you do timeline profiling and expand the event tree log and check which function is eating memory – ngCoder Sep 30 '16 at 06:50
  • In addition to what @Angular_10 has said above, you can also try tools like Batarang to see what variables are in scope when this memory leak happens. This is really really common in AngularJS – nikjohn Oct 04 '16 at 06:36
  • Try to use as little $scope.$apply() as possible. – kingtut007 Oct 06 '16 at 19:25
  • Can you write how you are creating instances of Person. do you use timers? also are you using ngRoute module? and last but not least do you have complicated event listening for the elements? – Qaddura Oct 07 '16 at 00:55
  • @Qaddura Yes, we are using ng state routers. – Vaibhav Shah Oct 07 '16 at 11:48
  • when you move from one view to another, angular does not delete the objects... instead it just gets via ajax the new view. i used ReactiveX with angularjs1 and in order to clear memory leaks i had to store my objects and delete them on view changes.. for example event listeners, and timers if you are using them then GC cannot clean their html elements until disposed – Qaddura Oct 07 '16 at 12:33
  • Some time a memory leaks is related to event listeners, is a good practice to manually clean it up. As an example, when you create a listener you should save it in a var and then listen the `'$destroy'` event. Take a look to this entry [AngularJS - Does $destroy remove event listeners?](http://stackoverflow.com/questions/26983696/angularjs-does-destroy-remove-event-listeners) maybe can help you. – aUXcoder Oct 07 '16 at 17:05
  • @Qaddura This is exactly what I have observed.Angular doesn't removed view of router instead keeps in detached dom for future use. It might be dont by JQuery as it is wrapped in document fragment. How you removed it in your case ? – Vaibhav Shah Oct 10 '16 at 06:16
  • if you are adding event listeners for those detached html elements then you should remove them. like if you have – Qaddura Oct 10 '16 at 13:16
  • do you have such scenario in your case? – Qaddura Oct 10 '16 at 13:17
  • @VaibhavShah also check the clean function in this link https://github.com/Dev-Hubs/ReactiveXHub/blob/master/controllers/buttonsController.js that is how i did it – Qaddura Oct 10 '16 at 13:26

1 Answers1

1

AngularJS has memory leaks when there are many bindings. Now limitation of angularJS is that it has 2-way binding. So, if you change any value in model, view that triggers $diget(), $watch() loop. So, depending upon how big your application is it consumes memory.

I suggest to try couple of steps:

  • Calculate angular Scope objects using angular batarang
  • Scopes $destroy() Method to free memory
  • Try to reduce your JS consumed in page. Use whatever is required

In my application I reduced watchers and life was easy.