Angular Form Inputs are memory leaking.

[burdokat]

🐞 bug report

Affected Package

The issue is caused by package @angular/forms
Unable to confirm if it is related to other packages.

Is this a regression?

No, the previous angular 8 version does not present this issue.

Description

Any instances pertaining the form keeps piling up in memory. Hence, everything else from the form up to its container (component, modal, or anything else) are not being garbage collected. Hence, memory is hugely leaking (See image below of nodes piling up).
A very simple sample demo has been uploaded as an example to represent this issue in its minimum expression. It is a very simple two page app: an auth page with a single input field (template driven form) and the explore page to simplify things up. There are 2 buttons inside the auth page; one of them is the submit button of the form. Both buttons navigate to the explore page. (Is done this way to detect the possible issue).
The explore page has a button to navigate back to the auth page and close the loop.

To prove the issue, we navigate back and forth using only the buttons (completely ignoring the input field).
We just keep routing back and forth pressing the buttons. The result is the expected behaviour where garbage is collected.
This also proves that the issue is unrelated to the router.

PROBLEM DETECTED:
The memory leaks bubbles out whenever the form is dirty, in other words, when something is typed in the input field and the form is dirty before navigating. If we navigate back and forth and we keep typing in the simple input field, then the memory leak clarifies.

First Iteration:

Second Iteration:

(Please note that this demo was created solely to describe and mark up this bug behavior. The actions described here may not represent actual practical uses for angular forms. But in essence, this memory leak can be a huge performance issue for any angular application using @angular/forms, if certain conditions are met.)

🔬 Minimal Reproduction

Please check the link to the git repository below where the sample demo code is published:
https://github.com/burdokat/Angular9SimpleFormBugDemo

🔥 Exception or Error

No exception or error thrown.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.8
Node: 12.16.3
OS: win32 x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.8
@angular-devkit/build-angular 0.901.8
@angular-devkit/build-optimizer 0.901.8
@angular-devkit/build-webpack 0.901.8
@angular-devkit/core 9.1.8
@angular-devkit/schematics 9.1.8
@angular/cli 9.1.8
@ngtools/webpack 9.1.8
@schematics/angular 9.1.8
@schematics/update 0.901.8
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

Anything else relevant?
Unable to confirm if this is a browser specific issue.
IMPORTANT. The same behaviour is exhibited in reactive driven forms too.

This may be related to other bugs see #37576, #37431
(Requires more thorough investigation).

[AndrewKushnir]

Hi @burdokat, thanks for reporting the issue and providing a repro.

I'm working on a PR #37566 that contains changes to perform the cleanup after Forms-related directives are destroyed. Could you please try to test the scenario with the code from that PR to check if you still see the memory leak?

To test your demo app with the changes from that PR, you can follow an instruction in this document on how to use PR artifacts. An archive with updated @angular/forms package that contains changes from the PR is available here. Note: the mentioned archive with updated @angular/forms package is for testing purposes only and not suitable for production usage (that archive will be removed once this PR is closed).

Thank you.

[capc0]

related #37952

[jelbourn]

Duplicate of #20007

[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.}