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
18.1.4
Description
Starting from @angular/cdk version 18.2.0, a bug got introduced which causes "Maximum call stack size exceeded" errors when we have a tree node with many dynamic children. From our observations, it can start already from +/- 500 child nodes.
It does not need to be deeply nested, just 1 level deep is enough, but the amount of child nodes matters.
I have not been able to reproduce it with flat cdk-tree-node, only when using the cdk-nested-tree-node. Even then, it only seems to happen when loading children dynamically plus timing (network delay) also seems to play a role.
The errors look like this:
NOTE: it can also be reproduced using the treeControl instead of childrenAccessor (like we would write it before v18.2.0). That makes no difference. Please let me know if you would like to see an example of that on StackBlitz as well...
Reproduction
StackBlitz link: https://stackblitz.com/edit/qmvryx-5s6t5r?file=src%2Fexample%2Fcdk-tree-nested-children-accessor-example.ts
Steps to reproduce:
- visit above StackBlitz link
- Open JS console
- Expand the Root node
- Observe errors is JS console
Expected Behavior
No errors in console.
Actual Behavior
An explosion of errors: RangeError: Maximum call stack size exceeded
Environment
Angular CLI: 18.2.4
Node: 20.12.2
Package Manager: pnpm 9.8.0
OS: win32 x64
Angular: 18.2.4
... animations, build, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1802.4 (cli-only)
@angular-devkit/core 18.2.4 (cli-only)
@angular-devkit/schematics 18.2.4 (cli-only)
@angular/cdk 18.2.3
@angular/material 18.2.3
@schematics/angular 18.2.4
rxjs 7.8.1
typescript 5.5.4
webpack 5.91.0
zone.js 0.14.10