Memory leak when attaching events via Renderer or Observable.fromEvent

[rkonstantinov]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

With the Angular 5.0.1 and zone.js 0.8.18, it seems that a reference to the element to which an event is attached is retained even after the event handler is removed and element is removed. This happens if the element is not present initial and after it is shown an event handler is attached to it.

With older (0.8.12) version of the zone.js this behavior cannot be reproduced.

Expected behavior

All of the element references to be released.

Minimal reproduction of the problem with instructions

A ng-cli project to demonstrate the issue can be found

• at https://github.com/rkonstantinov/ng-event-memory-leak
• or at https://stackblitz.com/edit/angular-gitter-ngkwei?file=app/app.component.ts

Also a short screencast is available -> https://github.com/rkonstantinov/ng-event-memory-leak/blob/master/scroll-event-leak.webm

and the basic setup:

@Component({
  selector: 'app-root',
  template: `
        <h2>Steps to reproduce</h2>
        <ol>
          <li>Click on the button to show the element - this will attach and instantly detach the scroll event handler</li>
          <li>Click again on the button to hide it</li>
          <li>Open Chrome dev tools and take a Memory snapshot</li>
          <li>Switch to <b>Containment</b></li>
          <li>Inspect <b>Detached DOM tree</b>. There should be one entry which is our div element</li>
        </ol>

        <button (click)="toggle = !toggle">{{toggle ? 'attached' : 'detached'}}</button>
        <div #container *ngIf="toggle" style="background:red; height: 200px; width: 200px"></div>
        `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  private subscription: Subscription;

  toggle = false;

  @ViewChildren('container') containers = new QueryList<any>();

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.subscription = this.containers.changes.filter(x => x.length).subscribe(e => {
      // Observable.fromEvent(e.first.nativeElement, 'scroll').subscribe(() => console.log(42)).unsubscribe();
      this.renderer.listen(e.first.nativeElement, 'click', () => console.log(42))();
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Environment

Angular version: 5.0.1
zone.js: 0.8.18

Browser:

• Chrome (desktop) version XX

For Tooling issues:

• Platform: Mac, Linux

[JiaLiPassion]

@rkonstantinov , could you try the attached zone.js.zip and override node_modules/zone.js/dist/zone.js. thank you.
zone.js.zip

[rkonstantinov]

@JiaLiPassion, thanks.
Unfortunately, the leak is still there, although it looks a bit differently now 😉 . See bellow:

[JiaLiPassion]

@rkonstantinov , I have confirmed that with the zone.js 0.8.12, the tryCatchTarget still exists, and I believe it is hold by unsubscribe.
I add a button with the following code

 clear() {
    this.subscription.unsubscribe();
  }

the detached dom is gone. so I think my updated zone.js.zip resolved the zone.js involved memory leak, I will make a PR to resolve it in zone.js repo, thank you for posting the issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}