bug(cdk/tree): RangeError: Maximum call stack size exceeded

[kfrederix]

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:

1. visit above StackBlitz link
2. Open JS console
3. Expand the Root node
4. 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

[kfrederix]

Thank you for the super fast fix! 🙌

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