Description
Which @angular/* package(s) are the source of the bug?
elements
Is this a regression?
No
Description
I am rendering an array of objects through ngFor. For each element of the array, I render a web element.
When adding new elements to the array outside angular zone (Simulating data added through web sockets) and then detecting that change with detectChanges(), I get this error.
I have done analysis on this and below is the reason why this is happening:
- The first change detection via
detectChanges()is causing angular to detect that new elements have been added to the array. - The
ngDoCheckofngForis called which plans out a set of operations to update the template according to the new array. In this case it plans to do addition operations. - The first addition operation occurs, and the first web element is added.
onInvoke(connectCallback)is called, which further callscheckStable(), and an app-wide change detection is triggered.- This change detection again runs the
ngDoCheckofngForand calls the_reset()function. - The
isDirtycondition inside this function is true and it clears iterators and index mappings (previousIndex, currentIndex), assuming a fresh diffing pass. - Angular now continues with the original
ngForrun but now the index state is corrupted. The second addition operation fails to find a view and throws the above error.
To summarize:
Addition of a web element causes an app-wide change detection and resets the indexes and iterators causing the _lview issue for the next addition operations.
I have recreated this issue on stackblitz. It is giving the "Cannot read properties of null (reading 'destroyed')" error there. On my local machine, I am getting the "Cannot read properties of null (reading '_lView')" error.
Edit: since the scope of this issue has changed from *ngFor to @for, the above description/analysis is not relevant anymore, but keeping it here just for reference.
Please provide a link to a minimal reproduction of the bug
*ngFor issue - https://stackblitz.com/edit/stackblitz-starters-xbiruma3
@for issue - https://stackblitz.com/edit/stackblitz-starters-nmtc6nl5
Please provide the exception or error you saw
core.mjs:6531 ERROR TypeError: Cannot read properties of null (reading '_lView')
at ViewContainerRef.insertImpl (core.mjs:16273:31)
at ViewContainerRef.insert (core.mjs:16270:21)
at ViewContainerRef.move (core.mjs:16309:21)
at common.mjs:3180:31
at DefaultIterableDiffer.forEachOperation (core.mjs:33351:17)
at NgForOf._applyChanges (common.mjs:3168:17)
at NgForOf.ngDoCheck (common.mjs:3163:22)
at callHookInternal (core.mjs:5136:14)
at callHook (core.mjs:5167:9)
at callHooks (core.mjs:5118:17)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.2.1
Node: 18.20.6
Package Manager: npm 10.8.2
OS: win32 x64
Angular: 17.3.9
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.16
@angular-devkit/build-angular 17.2.2
@angular-devkit/core 17.2.2
@angular-devkit/schematics 17.2.1
@angular/cli 17.2.1
@schematics/angular 17.2.1
ng-packagr 17.2.1
rxjs 7.8.0
typescript 5.3.3
zone.js 0.14.0
Anything else?
No response