angular: Components not being garbage collected by browser, causing major memory leak

@kevinpbaker thanks for the update!

Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1308845

This issue has been fixed within the chromium browser. It hasn’t been released yet, but it can be tested with Chrome’s Canary browser: https://www.google.com/intl/en_ca/chrome/canary/

Broken Version 100.0.4896.60 (Official Build) (arm64)

https://user-images.githubusercontent.com/48214072/162014156-d33d5521-a5fc-4554-ade2-c7a943923a16.mp4

Fixed Version 102.0.4987.0 (Official Build) canary (arm64)

https://user-images.githubusercontent.com/48214072/162014327-751da40f-35fd-429a-8a1c-9fcc32225b43.mp4

Interesting, #41047 does mention that the leaks were specific to Chrome. It may be worth checking again after next week’s 14.0.0-next release which contains the __ngContext__ fix. You can also try it now by installing from https://github.com/angular/core-builds.

@crisbeto after a lot more testing, I think this issue is specific to Microsoft Edge and Chrome. I was unable to get Safari or Firefox to leak memory using the memory kill app provided.

Safari

The memory footprint in Safari will always climb and then plateau. Even if I spam the garbage collection button it remains at or below the plateau value. Here is an image showing this behavior:

Firefox

The memory footprint in Firefox gets cleaned up regardless of how many times I try to get it into the leaking memory state. Here is an image showing this behavior:

While doing this I had all 4 browsers running at the same time. All of them running the memory killer app. Microsoft Edge and Chrome would leak memory, but Safari and Firefox would not.

From the tests and information above, I think we can conclude that this isn’t an Angular Framework problem, but a browser problem.

Also, one of the computers is factory new that I used to leak memory on Microsoft Edge and Chrome. I install node.js, then I clone the memory killer app using git clone https://github.com/kevinpbaker/angular-memory-killer.git, then I run npm install and ng serve --prod --port 4204. I am able to get Microsoft Edge and Chrome to leak memory doing this.

To answer the questions:

1. The solution I provided above is a quick way to check if the __ngContext__ fix would resolve the issue in the memory killer app, but it isn’t foolproof. The actual solution is in #41047.
2. __ngContext__ doesn’t cause memory leaks by itself. If the app doesn’t have leaks at all, __ngContext__ isn’t going to introduce new leaks. It comes into play if the apps has some leaks which __ngContext__ will make worse.
3. Style attributes won’t be affected by the __ngContext__ issue. We have one code path where a reference to the host DOM node will be retained when there are styles associated with it. It only applies to components with encapsulation: ViewEncapsulation.ShadowDom though.

As for reproducing it, it’s entirely possible that I’m not doing something in the same way as you or there’s something in my environment that prevents it from happening. What I did today was to npm i, ng serve and then take memory snapshots in the dev tools. I had it running for about 15min with no change in the amount memory being consumed.

One thing worth trying is to check if the leak happens in other browsers like Firefox or Safari. It would at least help us narrow it down to a framework issue or a potential problem with a browser.

I tried running both the memory killer app and the menu app mentioned above, but I couldn’t get it to leak more than 13 DOM nodes which would usually be GCed on the next snapshot. There’s a recording of my timeline below.

https://user-images.githubusercontent.com/4450522/154483715-0773ccc2-4a64-4bf1-b02d-0e817e980513.mov

Looking at your heap dump, it does have some references in __ngContext__ so it’s possible that https://github.com/angular/angular/pull/45051 will help with it. It’s hard to say before the change is actually released though. You could try changing the MemoryKillerComponent to the following which should have a similar effect:

export class MemoryKillerComponent {
  constructor(private _elementRef: ElementRef) {}

  ngOnDestroy() {
    [
      this._elementRef.nativeElement,
      ...this._elementRef.nativeElement.querySelectorAll('*'),
    ].forEach((el) => {
      el.__ngContext__ = null;
    });
  }
}