bug: Memory leak with detached DOM nodes in Ionic

[ralphcode]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.28.2

Current Behavior

I've manually build Ionic with 4.28.2 and similar to #5181 we see continuous detached DOM nodes in Ionic latest when navigating between views. Over time, this can balloon to tens of thousands of detached DOM nodes (verified via Chrome DevTools), causing performance degradation and application crashes.

Expected Behavior

When a component or page is destroyed/navigated away from, its DOM elements should be properly removed from memory. The DOM node count should not grow indefinitely, ensuring stable performance over time.

System Info

> @ionic/[email protected] build
> npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json


> @ionic/[email protected] clean
> node scripts/clean.js


> @ionic/[email protected] build.css
> npm run css.sass && npm run css.minify


> @ionic/[email protected] css.sass
> sass --embed-sources --style compressed src/css:./css


> @ionic/[email protected] css.minify
> cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css

[00:12.5]  @stencil/core
[00:12.8]  v4.28.2 🎤
[00:15.2]  build, ionic, prod mode, started ...
[00:15.2]  transpile started ...
[00:19.1]  transpile finished in 3.85 s
[00:19.9]  generate custom elements started ...
[00:19.9]  generate hydrate app started ...
[00:19.9]  generate lazy started ...
[00:33.7]  generate custom elements finished in 13.84 s
[00:34.2]  generate lazy finished in 14.32 s
[00:34.8]  generate hydrate app finished in 14.87 s
[00:34.8]  copy started ...
[00:34.8]  generating react-library started ...
[00:34.8]  generating vue-library started ...
[00:34.8]  generating angular-library started ...
[00:34.8]  generating angular-library started ...
[00:34.9]  generate vue-library finished in 99 ms
[00:35.0]  generate angular-library finished in 172 ms
[00:35.0]  generate angular-library finished in 172 ms
[00:35.0]  generate react-library finished in 173 ms
[00:35.2]  copy finished (1346 files) in 433 ms
[00:35.4]  build finished in 20.21 s

Steps to Reproduce

Steps to update, and recompile:

clone ionic-framework-main > ionic-framework
Update: ./ionic-framework/core/package.json > "@stencil/core": "4.28.2",

> ionic-framework
npm i
npx lerna bootstrap
npx lerna run build

> ionic-framework/packages/angular/dist
npm pack

> app
npm i ./ionic-framework/packages/angular/dist/ionic-angular-8.5.1.tgz

Code Reproduction URL

https://github.com/ralphcode/capacitor-angular-dom-leak

Additional Information

This is relates to similar recent issues #5181 and #6148 so appears to be a Stencil issue not Ionic?

I note: ionic-team/ionic-framework#30132 however, as above this does not seem to address the issue.

Let me know if you need anything further or if I've missed a step in building / reproducing this. Thanks for all your efforts 🙏

[christian-bromann]

so appears to be a Stencil issue not Ionic?

That is not necessarily true. As a Stencil user you can certainly introduce memory leaks as well.

I've manually build Ionic with 4.28.2

This is not recommended as we still working on some incompatibilities especially around Ionic Angular.

Any contributions that resolve this bug are much appreciated. Thanks for raising the issue.