Memory Leak in Injector

[GeorgianStan]

I've encountered a possible memory leak while using OverlayRef and Injector.

Reproduction

Inside AppComponent there is a click event on a button. That click event will generate an array and pass that array to another component using ComponentPortal

The constructor and the click event from AppComponent:

// ? AppComponent constructor
  constructor(private overlay: Overlay) {
    this.#overlayRef = this.overlay.create({
      positionStrategy: this.overlay
        .position()
        .global()
        .centerHorizontally()
        .centerVertically(),
      hasBackdrop: true,
    });

    this.#overlayRef.backdropClick().subscribe(() => this.#overlayRef.detach());
}

onClick(){
 const output =  new Array(1000).fill('asfasdf');
 this.#overlayRef.attach(
      new ComponentPortal(
        MyComponent,
        null,
        Injector.create({
          providers: [{ provide: MY_TOKEN, useValue: output }],
        })
      )
    );
}

Actual Behavior

It looks like each time the modal is created the data generated and injected in the component, but once the modal disappears, the data is not removed from the memory.

Environment

• Angular:

  • "@angular/core": "~11.2.5",

• CDK/Material:

  • "@angular/cdk": "^11.2.4",

• Browser(s): Chrome

• Operating System (e.g. Windows, macOS, Ubuntu): Windows10

[YoeriNijs]

I am not sure, but I guess you should call dispose() after detach() in order to actually clear the data entirely. Have you tested this?

In our enterprise project, we also have some memory leakage between dialog unit tests - even when we use beforeEach. Due to this, some of our tests fail. It is happening since our migration to Angular 9 from Angular 8 (a bit late, it is a long story... ;)).

In our case, there is leakage between unit tests (written in Spectator) for a custom dialog component. In the tests, we inject a dialog ref in the setup step, which is fired before every test. In the tests, we do not close the dialog ref, but only instantiate it.

At the moment, I am not sure if the leakage is a result of the cdk or Spectator, so keep that in mind. However, the only thing I can say with certainty is that only dialog component tests fail after the migration to Angular 9, which is a bit odd. All other tests are working fine, so I tend to think that it has something to do with the overlayRef.

[YoeriNijs]

I've added a reproduction in Angular with Karma and Material. I am using Spectator, I was not able to reproduce the issue with Testbed itself. See the link above.