afterRenderEffect leaks signal reads #62980
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
I encountered a memory leak while using the mat-paginator component.
When I load any component that has a mat-paginator and then move to the next component, the memory of unused nodes is not freed.
If you move quickly between components, then the number of DetachedElement will increase depending on how many times the route activation is performed.
Reproduction
I was unable to reproduce this issue using StackBlitz.
However, I was able to reproduce it in a clean Angular project, both with and without SSR, and with and without zoneless mode.
I installed all the necessary dependencies and set up Angular Material. I then created a few basic components, one of which contained a mat-paginator. By navigating between the components, I observed that the number of detached mat-option elements increased. Additionally, the component containing the mat-paginator was not fully removed from the DOM, even after a significant amount of time.
This issue became particularly noticeable in a real-world project with actual product cards data. In the scenarios described above, memory usage increased significantly over time. However, when the mat-paginator was removed from the component, all unused nodes were properly released, and memory consumption remained stable.
Expected Behavior
Navigating between components should properly clean up all associated DOM elements and Angular components. Specifically:
- Components containing mat-paginator should be fully destroyed and removed from the DOM when navigated away from.
- Detached elements such as mat-option should not accumulate in memory over time.
- No memory leaks or unintended DOM retention should occur during standard component lifecycle transitions.
Actual Behavior
The above-described interaction between components should not result in the accumulation of an excessive number of unused nodes. This behavior suggests a potential memory leak, as elements such as mat-option and components with mat-paginator are not being properly destroyed or garbage collected upon navigation.
Environment
-
Angular:
Angular CLI: 20.0.5
Node: 22.17.0
Package Manager: npm 10.9.2
OS: win32 x64 -
CDK/Material: "^20.1.4",
-
Browser(s): Chrome 138.0.7204.170,
-
Operating System: Windows 11,
-
Dependencies:
"dependencies": {
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/material": "^20.1.4",
"@angular/platform-browser": "^20.0.0",
"@angular/router": "^20.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^20.0.5",
"@angular/cli": "^20.0.5",
"@angular/compiler-cli": "^20.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.7.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.2"
}
I also encountered this problem on an Angular project with the following dependencies:
"dependencies": {
"@angular/cdk": "^19.2.10",
"@angular/common": "^19.2.10",
"@angular/compiler": "^19.2.10",
"@angular/core": "^19.2.10",
"@angular/forms": "^19.2.10",
"@angular/material": "^19.2.11",
"@angular/platform-browser": "^19.2.10",
"@angular/platform-browser-dynamic": "^19.2.10",
"@angular/platform-server": "^19.2.10",
"@angular/pwa": "^19.2.10",
"@angular/router": "^19.2.10",
"@angular/service-worker": "^19.2.10",
"@angular/ssr": "^19.2.8",
"@auth0/angular-jwt": "^5.2.0",
"@fixAR496/ngx-elly-lib": "^0.0.11",
"@ngrx/effects": "^19.1.0",
"@ngrx/operators": "^19.1.0",
"@ngrx/store": "^19.1.0",
"@rx-angular/cdk": "^19.1.0",
"@rx-angular/template": "^19.2.1",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},