angular / angular/components

bug(CDK DragAndDrop): Occasional Fatal Error similar to closed issue #19359

Abierto
#20,623 10 comentarios 4 reacciones 0 asignados Ver en GitHub
area: cdk/drag-drop P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Reproduction

Drag and drop a few times (5 to 20). The error below pops up. Looks similar to closed issue 19359

Code looks like this:

```



```
#### Expected Behavior

No bugs...

#### Actual Behavior

What behavior did you actually see?

```
raven-error-handler.ts:11 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at EmulatedEncapsulationDomRenderer2.insertBefore (http://localhost:4200/vendor.js:111866:20)
at BaseAnimationRenderer.insertBefore (http://localhost:4200/vendor.js:110877:23)
at nativeInsertBefore (http://localhost:4200/vendor.js:40265:18)
at applyToElementOrContainer (http://localhost:4200/vendor.js:39835:13)
at applyNodes (http://localhost:4200/vendor.js:40460:17)
at applyView (http://localhost:4200/vendor.js:40492:5)
at addRemoveViewFromContainer (http://localhost:4200/vendor.js:39861:9)
at ViewContainerRef.insert (http://localhost:4200/vendor.js:41248:17)
at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:41200:22)
at http://localhost:4200/vendor.js:26206:50
at DefaultIterableDiffer.forEachOperation (http://localhost:4200/vendor.js:50416:17)
at NgForOf._applyChanges (http://localhost:4200/vendor.js:26201:17)
at NgForOf.ngDoCheck (http://localhost:4200/vendor.js:26196:22)
at callHook (http://localhost:4200/vendor.js:34148:14)
at callHooks (http://localhost:4200/vendor.js:34114:17)
handleError @ raven-error-handler.ts:11
(anonymous) @ core.js:28361
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27364
tick @ core.js:28361
(anonymous) @ core.js:28240
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27437
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:27319
next @ core.js:28239
schedulerFn @ core.js:24801
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:24791
checkStable @ core.js:27373
onLeave @ core.js:27483
onInvokeTask @ core.js:27431
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

```
#### Environment

- Angular: 10.0.12
- CDK/Material: 10.1.3
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduce el fallo usando la plantilla cdkDropList/cdkDrag indicada y acciones repetidas de arrastrar y soltar; después, compáralo con el issue cerrado #19359. Empieza por el stack de insertBefore y el comportamiento de cdkDropList/cdkDrag; el informe de raven-error-handler.ts identifica dónde aparece la excepción. El trabajo estará terminado cuando arrastrar repetidamente ya no produzca la DOMException.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.