angular / angular/components

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

オープン
#20,623 コメント 10 件 リアクション 4 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### 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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

報告されている cdkDropList/cdkDrag テンプレートと、ドラッグ&ドロップ操作の繰り返しを使って失敗を再現し、その後、クローズされた issue #19359 と比較します。insertBefore のスタックと cdkDropList/cdkDrag の動作から始めます。raven-error-handler.ts のレポートによって、例外が表面化する場所を特定できます。繰り返しドラッグしても DOMException が発生しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。