fix(cdk/drag-drop): make item and list easier to tree shake (#32604)

Currently we have the `DragDrop` service that creates the `DragRef` and `DropListRef` which contain most of the implementation for the directives. The problem is that by going through the service, we can't tree shake the list if the app is only using the item. These changes move the creation into separate functions.

Author: crisbeto

goldens/cdk/drag-drop/index.api.md

@@ -9,6 +9,7 @@ import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
@@ -298,16 +299,24 @@ export class CdkDropListGroup<T> implements OnDestroy {
 // @public
 export function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
 
+// @public
+export function createDragRef<T = unknown>(injector: Injector, element: ElementRef<HTMLElement> | HTMLElement, config?: DragRefConfig): DragRef<T>;
+
+// @public
+export function createDropListRef<T = unknown>(injector: Injector, element: ElementRef<HTMLElement> | HTMLElement): DropListRef<T>;
+
 // @public
 export type DragAxis = 'x' | 'y';
 
 // @public
 export type DragConstrainPosition = (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
 
-// @public
+// @public @deprecated
 export class DragDrop {
     constructor(...args: unknown[]);
+    // @deprecated
     createDrag<T = any>(element: ElementRef<HTMLElement> | HTMLElement, config?: DragRefConfig): DragRef<T>;
+    // @deprecated
     createDropList<T = any>(element: ElementRef<HTMLElement> | HTMLElement): DropListRef<T>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DragDrop, never>;

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

@@ -43,9 +43,8 @@ import {CDK_DRAG_HANDLE, CdkDragHandle} from './drag-handle';
 import {CdkDragPlaceholder} from './drag-placeholder';
 import {CdkDragPreview} from './drag-preview';
 import {CDK_DRAG_PARENT} from '../drag-parent';
-import {DragRef, Point, PreviewContainer, DragConstrainPosition} from '../drag-ref';
+import {DragRef, Point, PreviewContainer, DragConstrainPosition, createDragRef} from '../drag-ref';
 import type {CdkDropList} from './drop-list';
-import {DragDrop} from '../drag-drop';
 import {CDK_DRAG_CONFIG, DragDropConfig, DragStartDelay, DragAxis} from './config';
 import {assertElementNode} from './assertions';
 import {DragDropRegistry} from '../drag-drop-registry';
@@ -222,9 +221,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   constructor() {
     const dropContainer = this.dropContainer;
     const config = inject<DragDropConfig>(CDK_DRAG_CONFIG, {optional: true});
-    const dragDrop = inject(DragDrop);
 
-    this._dragRef = dragDrop.createDrag(this.element, {
+    this._dragRef = createDragRef(this._injector, this.element, {
       dragStartThreshold:
         config && config.dragStartThreshold != null ? config.dragStartThreshold : 5,
       pointerDirectionChangeThreshold:

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

@@ -17,16 +17,16 @@ import {
   ChangeDetectorRef,
   booleanAttribute,
   inject,
+  Injector,
 } from '@angular/core';
 import {Directionality} from '../../bidi';
 import {_IdGenerator} from '../../a11y';
 import {ScrollDispatcher} from '../../scrolling';
 import {CDK_DROP_LIST, CdkDrag} from './drag';
 import {CdkDragDrop, CdkDragEnter, CdkDragExit, CdkDragSortEvent} from '../drag-events';
 import {CDK_DROP_LIST_GROUP, CdkDropListGroup} from './drop-list-group';
-import {DropListRef} from '../drop-list-ref';
+import {createDropListRef, DropListRef} from '../drop-list-ref';
 import {DragRef} from '../drag-ref';
-import {DragDrop} from '../drag-drop';
 import {DropListOrientation, DragAxis, DragDropConfig, CDK_DRAG_CONFIG} from './config';
 import {merge, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
@@ -197,14 +197,14 @@ export class CdkDropList<T = any> implements OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
-    const dragDrop = inject(DragDrop);
     const config = inject<DragDropConfig>(CDK_DRAG_CONFIG, {optional: true});
+    const injector = inject(Injector);
 
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       assertElementNode(this.element.nativeElement, 'cdkDropList');
     }
 
-    this._dropListRef = dragDrop.createDropList(this.element);
+    this._dropListRef = createDropListRef(injector, this.element);
     this._dropListRef.data = this;
 
     if (config) {

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

@@ -6,29 +6,19 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, NgZone, ElementRef, inject, RendererFactory2, DOCUMENT} from '@angular/core';
-
-import {ViewportRuler} from '../scrolling';
-import {DragRef, DragRefConfig} from './drag-ref';
-import {DropListRef} from './drop-list-ref';
-import {DragDropRegistry} from './drag-drop-registry';
-
-/** Default configuration to be used when creating a `DragRef`. */
-const DEFAULT_CONFIG = {
-  dragStartThreshold: 5,
-  pointerDirectionChangeThreshold: 5,
-};
+import {Injectable, ElementRef, inject, Injector} from '@angular/core';
+import {createDragRef, DragRef, DragRefConfig} from './drag-ref';
+import {createDropListRef, DropListRef} from './drop-list-ref';
 
 /**
  * Service that allows for drag-and-drop functionality to be attached to DOM elements.
+ * @deprecated Use the `createDragRef` or `createDropListRef` function for better tree shaking.
+ * Will be removed in v23.
+ * @breaking-change 23.0.0
  */
 @Injectable({providedIn: 'root'})
 export class DragDrop {
-  private _document = inject(DOCUMENT);
-  private _ngZone = inject(NgZone);
-  private _viewportRuler = inject(ViewportRuler);
-  private _dragDropRegistry = inject(DragDropRegistry);
-  private _renderer = inject(RendererFactory2).createRenderer(null, null);
+  private _injector = inject(Injector);
 
   constructor(...args: unknown[]);
   constructor() {}
@@ -37,33 +27,23 @@ export class DragDrop {
    * Turns an element into a draggable item.
    * @param element Element to which to attach the dragging functionality.
    * @param config Object used to configure the dragging behavior.
+   * @deprecated Use the `createDragRef` function that provides better tree shaking.
+   * @breaking-change 23.0.0
    */
   createDrag<T = any>(
     element: ElementRef<HTMLElement> | HTMLElement,
-    config: DragRefConfig = DEFAULT_CONFIG,
+    config?: DragRefConfig,
   ): DragRef<T> {
-    return new DragRef<T>(
-      element,
-      config,
-      this._document,
-      this._ngZone,
-      this._viewportRuler,
-      this._dragDropRegistry,
-      this._renderer,
-    );
+    return createDragRef(this._injector, element, config);
   }
 
   /**
    * Turns an element into a drop list.
    * @param element Element to which to attach the drop list functionality.
+   * @deprecated Use the `createDropListRef` function that provides better tree shaking.
+   * @breaking-change 23.0.0
    */
   createDropList<T = any>(element: ElementRef<HTMLElement> | HTMLElement): DropListRef<T> {
-    return new DropListRef<T>(
-      element,
-      this._dragDropRegistry,
-      this._document,
-      this._ngZone,
-      this._viewportRuler,
-    );
+    return createDropListRef(this._injector, element);
   }
 }

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

@@ -12,10 +12,13 @@ import {coerceElement} from '../coercion';
 import {_getEventTarget, _getShadowRoot} from '../platform';
 import {ViewportRuler} from '../scrolling';
 import {
+  DOCUMENT,
   ElementRef,
   EmbeddedViewRef,
+  Injector,
   NgZone,
   Renderer2,
+  RendererFactory2,
   TemplateRef,
   ViewContainerRef,
   signal,
@@ -124,6 +127,35 @@ const dragImportantProperties = new Set([
  */
 export type PreviewContainer = 'global' | 'parent' | ElementRef<HTMLElement> | HTMLElement;
 
+/**
+ * Creates a `DragRef` for an element, turning it into a draggable item.
+ * @param injector Injector used to resolve dependencies.
+ * @param element Element to which to attach the dragging functionality.
+ * @param config Object used to configure the dragging behavior.
+ */
+export function createDragRef<T = unknown>(
+  injector: Injector,
+  element: ElementRef<HTMLElement> | HTMLElement,
+  config: DragRefConfig = {
+    dragStartThreshold: 5,
+    pointerDirectionChangeThreshold: 5,
+  },
+): DragRef<T> {
+  const renderer =
+    injector.get(Renderer2, null, {optional: true}) ||
+    injector.get(RendererFactory2).createRenderer(null, null);
+
+  return new DragRef(
+    element,
+    config,
+    injector.get(DOCUMENT),
+    injector.get(NgZone),
+    injector.get(ViewportRuler),
+    injector.get(DragDropRegistry),
+    renderer,
+  );
+}
+
 /**
  * Reference to a draggable item. Used to manipulate or dispose of the item.
  */

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ElementRef, NgZone} from '@angular/core';
+import {DOCUMENT, ElementRef, Injector, NgZone} from '@angular/core';
 import {Direction} from '../bidi';
 import {coerceElement} from '../coercion';
 import {ViewportRuler} from '../scrolling';
@@ -49,6 +49,24 @@ enum AutoScrollHorizontalDirection {
   RIGHT,
 }
 
+/**
+ * Creates a `DropListRef` for an element, turning it into a drop list.
+ * @param injector Injector used to resolve dependencies.
+ * @param element Element to which to attach the drop list functionality.
+ */
+export function createDropListRef<T = unknown>(
+  injector: Injector,
+  element: ElementRef<HTMLElement> | HTMLElement,
+): DropListRef<T> {
+  return new DropListRef(
+    element,
+    injector.get(DragDropRegistry),
+    injector.get(DOCUMENT),
+    injector.get(NgZone),
+    injector.get(ViewportRuler),
+  );
+}
+
 /**
  * Reference to a drop list. Used to manipulate or dispose of the container.
  */

src/cdk/drag-drop/public-api.ts

@@ -7,8 +7,15 @@
  */
 
 export {DragDrop} from './drag-drop';
-export {DragRef, DragRefConfig, Point, PreviewContainer, DragConstrainPosition} from './drag-ref';
-export {DropListRef} from './drop-list-ref';
+export {
+  DragRef,
+  DragRefConfig,
+  Point,
+  PreviewContainer,
+  DragConstrainPosition,
+  createDragRef,
+} from './drag-ref';
+export {DropListRef, createDropListRef} from './drop-list-ref';
 export {CDK_DRAG_PARENT} from './drag-parent';
 
 export * from './drag-events';