listeners invoked inside embedded views cause a memory leak

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

Yes

Description

When a component has a button with click handler and ngIf it won’t be destroyed after user click

Please provide a link to a minimal reproduction of the bug

https://github.com/s3141p/Ng-leak

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 12.1.1
Node: 14.15.1
Package Manager: npm 6.14.8
OS: linux x64

Angular: 12.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else?

To reproduce:

1. Clone the repo
2. ng serve
3. Click on To B Component link
4. Click on B button (!! Important step)
5. Make Memory snapshot
6. Click on To A Component
7. Run GC
8. Make Memory snapshot

Last snapshot will show that BComponent wasn’t destroyed.

[CalinaCristian]

is this issue being solved soon? These leaks get very big if you’re unit testing your application.

[petebacondarwin]

Thanks for the awesome reproduction @s3141p - this bit is 75% of the effort 😃

Looking at the generated Ivy code for the button click. Because it is in a template (due to the *ngIf) we get the following:

ɵɵlistener("click", function BComponent_button_2_Template_button_click_0_listener() {
  ɵɵrestoreView(_r2);
  const ctx_r1 = ɵɵnextContext();
  return ctx_r1.doNothing();
});

Both the call to ɵɵrestoreView() and ɵɵnextContext() attach objects to the current LFrame.contextLView property. The second call is the one responsible for attaching the LComponentView_BComponent object.

It seems like when the BComponent is destroyed we are not clearing this contextLView property.

One solution might be for the generated code to clear the current view at the end of the handler:

ɵɵlistener("click", function BComponent_button_2_Template_button_click_0_listener() {
  ɵɵrestoreView(_r2);
  const ctx_r1 = ɵɵnextContext();
  const result = ctx_r1.doNothing();
  ɵɵleaveView();
  return result;
});