fix(drag-drop): throw better error when attaching to non-element node

Currently if somebody attaches a `cdkDrag` to a non-element node (e.g. an `ng-container`), a cryptic error will be thrown. These changes log a proper error so it's easier to debug.

Author: crisbeto

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

@@ -493,6 +493,7 @@ describe('CdkDrag', () => {
       expect(dragElement.style.touchAction)
         .not.toEqual('none', 'should not disable touchAction on when there is a drag handle');
     });
+
     it('should be able to reset a freely-dragged item to its initial position', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -545,7 +546,14 @@ describe('CdkDrag', () => {
         expect(fixture.componentInstance.endedSpy).toHaveBeenCalledTimes(1);
       }));
 
-    });
+    it('should throw if attached to an ng-container', fakeAsync(() => {
+      expect(() => {
+        createComponent(DraggableOnNgContainer).detectChanges();
+        flush();
+      }).toThrowError(/^cdkDrag must be attached to an element node/);
+    }));
+
+  });
 
   describe('draggable with a handle', () => {
     it('should not be able to drag the entire element if it has a handle', fakeAsync(() => {
@@ -2580,6 +2588,14 @@ class ConnectedDropZonesWithSingleItems {
   droppedSpy = jasmine.createSpy('dropped spy');
 }
 
+@Component({
+  template: `
+    <ng-container cdkDrag></ng-container>
+  `
+})
+class DraggableOnNgContainer {}
+
+
 /**
  * Component that passes through whatever content is projected into it.
  * Used to test having drag elements being projected into a component.

src/cdk/drag-drop/drag.ts

@@ -307,6 +307,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       .pipe(take(1))
       .subscribe(() => {
         const rootElement = this._rootElement = this._getRootElement();
+
+        if (rootElement.nodeType !== this._document.ELEMENT_NODE) {
+          throw Error(`cdkDrag must be attached to an element node. ` +
+                      `Currently attached to "${rootElement.nodeName}".`);
+        }
+
         rootElement.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
         rootElement.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
         this._handles.changes.pipe(startWith(null)).subscribe(() =>