CdkDropList could not find connected drop list with id "${dr

Error message

CdkDropList could not find connected drop list with id "${drop}"

What it means

CdkDropList's connectedTo input accepts either CdkDropList references or string ids. When resolving string ids at the start of a drag sequence, if no registered drop list has a matching id, the directive warns that the connected list could not be found (the reference is then treated as undefined).

Source

Thrown at src/cdk/drag-drop/directives/drop-list.ts:308

    this._destroyed.next();
    this._destroyed.complete();
  }

  /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
  private _setupInputSyncSubscription(ref: DropListRef<CdkDropList>) {
    if (this._dir) {
      this._dir.change
        .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
        .subscribe(value => ref.withDirection(value));
    }

    ref.beforeStarted.subscribe(() => {
      const siblings = coerceArray(this.connectedTo).map(drop => {
        if (typeof drop === 'string') {
          const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);

          if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {
            console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
          }

          return correspondingDropList!;
        }

        return drop;
      });

      if (this._group) {
        this._group._items.forEach(drop => {
          if (siblings.indexOf(drop) === -1) {
            siblings.push(drop);
          }
        });
      }

      // Note that we resolve the scrollable parents here so that we delay the resolution
      // as long as possible, ensuring that the element is in its final place in the DOM.

View on GitHub (pinned to 0411926e7d)

Solutions

Verify the id string matches the target list's id exactly: <div cdkDropList id="todo">...</div>
Ensure the connected drop list is rendered (not behind *ngIf that is false) when dragging can start
Pass CdkDropList component/template references via #ref instead of string ids to avoid id-resolution issues
Fix typos and ensure ids are unique and stable

Example fix

// before
<div cdkDropList [connectedTo]="['done-lst']">…</div>
// after
<div cdkDropList [connectedTo]="['done-list']">…</div>

Defensive patterns

Strategy: validation

Validate before calling

const ids = ['todo', 'done'];
const registered = new Set(document.querySelectorAll('cdk-drop-list, [cdkDropList]'));
// or at runtime before drag:
ids.forEach(id => {
  if (!CdkDropList._dropLists?.some(l => l.id === id)) console.warn(`No drop list with id "${id}"`);
});

Type guard

function dropListExists(id: string): boolean {
  return CdkDropList._dropLists.some(list => list.id === id);
}

Prevention

Keep connectedTo ids in a constant array shared with the template ids
Avoid *ngIf on drop lists that participate in connectedTo
Prefer template-reference variables over string ids
Ensure ids are unique across the app

When it happens

Trigger: Setting [connectedTo]="['someId']" (or cdkDropListConnectedTo) where 'someId' does not match the id of any rendered CdkDropList when ref.beforeStarted fires during setupInputSyncSubscription in the constructor.

Common situations: Typo in the id string; the target drop list is rendered conditionally (*ngIf) or lazily and isn't registered yet; connecting to a list in a different injection context that never registers; using id binding before the id input is applied.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/5b51747c27f9177c. Report an issue: GitHub.