How to avoid memory leaks in your Angular application

In this article I will show you an example of a memory leak in a real world example and the proper steps to identify the problem and how to mitigate it.

Memory leak is a resource leak that takes place when a computer program/application incorrectly manages memory allocations where memory that are no longer needed are not being properly released. Another form of memory leak happens when an object which is stored in memory can no longer be accessed by the running code.

In this article we will focus on the latter and we will examine how easy it is to create memory leaks in your application without intending to, the proper steps that we can take to monitor for them, best practices to follow to limit memory leaks as well as helpful tools to use when monitoring your application in action.

Performance Monitor in Chrome DevTools

The Performance Monitor available in Chrome DevTools allows us to get a real-time view of various aspects of a page’s load or runtime performance. Various metrics are available and they could be turned on or off depending on what you are analyzing. Below is a list of what is available:

• CPU usage
• JS heap size
• DOM Nodes
• JS event listeners
• Documents
• Documents Frames
• Layouts /sec
• Style recalcs / sec