fix(drag-drop): warn if connected container ID doesn't exist

We support connecting two drop lists by their ID, but if the ID is incorrect, we silently ignore it. These changes add a warning so it's easier to debug issues where the ID might be misspelled.

Fixes #20056.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -5255,6 +5255,24 @@ describe('CdkDrag', () => {
         }).not.toThrow();
       }));
 
+    it('should warn when the connected container ID does not exist', fakeAsync(() => {
+      const fixture = createComponent(ConnectedDropZones);
+      fixture.detectChanges();
+
+      fixture.componentInstance.dropInstances.first.connectedTo = 'does-not-exist';
+      fixture.detectChanges();
+
+      const groups = fixture.componentInstance.groupedDragItems;
+      const element = groups[0][1].element.nativeElement;
+
+      spyOn(console, 'warn');
+      dragElementViaMouse(fixture, element, 0, 0);
+      flush();
+      fixture.detectChanges();
+
+      expect(console.warn).toHaveBeenCalledWith(`CdkDropList could not find connected drop ` +
+                                                `list with id "does-not-exist"`);
+    }));
   });
 
   describe('with nested drags', () => {

src/cdk/drag-drop/directives/drop-list.ts

@@ -19,6 +19,7 @@ import {
   SkipSelf,
   Inject,
   InjectionToken,
+  isDevMode,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
@@ -252,8 +253,17 @@ export class CdkDropList<T = any> implements OnDestroy {
 
     ref.beforeStarted.subscribe(() => {
       const siblings = coerceArray(this.connectedTo).map(drop => {
-        return typeof drop === 'string' ?
-            CdkDropList._dropLists.find(list => list.id === drop)! : drop;
+        if (typeof drop === 'string') {
+          const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop);
+
+          if (!correspondingDropList && isDevMode()) {
+            console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
+          }
+
+          return correspondingDropList!;
+        }
+
+        return drop;
       });
 
       if (this._group) {