title: Angular 2, Javascript, Memory Usage and Garbage Collection
body: <p>I am at a total loss and left feeling like giving up on using Angular 2 in general for building a real world application due to problems surrounding memory usage.</p>
  
  <p>I have followed all of the best coding practices like nulling all properties when no longer needed, removing all references to properties, emptying arrays etc, properly addressing closures etc etc etc etc...</p>
  
  <p>Regardless of this, when testing some pretty basic functionality in Angular 2, i continue to run into ever increasing memory usage during runtime for ALL KINDS of basic manipulations of the DOM.</p>
  
  <p>Just ONE example that use big chunks of memory during execution which never get garbage collected:</p>
  
  <p>Animating the width of a div over time.</p>
  
  <p>I have attempted to implement this kind of UI behavior in SEVERAL different ways, the most effective way having been to use an interval with requestAnimationFrame, and wrapping it all in Angular's <code>zone.runOutsideOfAngular</code> method as well. </p>
  
  <p>Regardless, placing the following line inside of a loop uses an ENORMOUS amount of memory that is never garbage collected even after properly canceling the loop using cancelAnimationFrame, nulling properties used within the loop along with all references to the div and removing the div from the DOM.</p>
  
  <pre><code>this.renderer.setStyle(this.progressBar.elRef.nativeElement.querySelector('.progress-inner'), 'width', percentProgress+'%');
  </code></pre>
  
  <p>As i'm sure you can tell, this is a line taken from a method which modifies the width of progress bar. Again, note i have tried implementing a progress bar in SEVERAL different ways. Using CSS to animate instead of the method outlined above.</p>
  
  <p>IN GENERAL THOUGH, it seems like no matter what i do — no matter what i try to implement, SO MANY actions that have ANYTHING to do with animation — even just things like scrolling seem to require an ever increasing amount of memory to execute that is never garbage collected inside of an Angular 2 application.</p>
  
  <p>So in short, this post is not specific to intervals, or animating the width of a div. Almost any task inside of an Angular 2 application seems to use an enormous amount of memory that is never garbage collected.</p>
  
  <p>Can anyone offer any guidance?
  Recommend a book on Memory usage and Javascript?</p>
  
  <p>It truly has been incredibly discouraging to run into the amount of memory usage problems that i have been. Pushes me to want to give up on using Angular 2 all together.</p>