refactor(cdk/drag-drop): use common service for loading structural styles

Switches the drag&drop module to use the common service to load the preview styles.

Author: crisbeto

src/cdk/drag-drop/BUILD.bazel

@@ -24,6 +24,7 @@ ng_module(
         "//src/cdk/bidi",
         "//src/cdk/coercion",
         "//src/cdk/platform",
+        "//src/cdk/private",
         "//src/cdk/scrolling",
         "@npm//@angular/common",
         "@npm//@angular/core",

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

@@ -6,23 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
-import {DOCUMENT} from '@angular/common';
 import {
-  ApplicationRef,
   ChangeDetectionStrategy,
   Component,
-  EnvironmentInjector,
   Inject,
   Injectable,
   NgZone,
   OnDestroy,
   ViewEncapsulation,
   WritableSignal,
-  createComponent,
   inject,
   signal,
 } from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {Observable, Observer, Subject, merge} from 'rxjs';
 import type {DropListRef} from './drop-list-ref';
 import type {DragRef} from './drag-ref';
@@ -33,9 +31,6 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
   capture: true,
 });
 
-/** Keeps track of the apps currently containing drag items. */
-const activeApps = new Set<ApplicationRef>();
-
 /**
  * Component used to load the drag&drop reset styles.
  * @docs-private
@@ -59,8 +54,7 @@ export class _ResetsLoader {}
 @Injectable({providedIn: 'root'})
 export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy {
   private _document: Document;
-  private _appRef = inject(ApplicationRef);
-  private _environmentInjector = inject(EnvironmentInjector);
+  private _styleLoader = inject(_CdkPrivateStyleLoader);
 
   /** Registered drop container instances. */
   private _dropInstances = new Set<DropListRef>();
@@ -169,7 +163,7 @@ export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy {
       return;
     }
 
-    this._loadResets();
+    this._styleLoader.load(_ResetsLoader);
     this._activeDragInstances.update(instances => [...instances, drag]);
 
     if (this._activeDragInstances().length === 1) {
@@ -313,23 +307,4 @@ export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy {
 
     this._globalListeners.clear();
   }
-
-  // TODO(crisbeto): abstract this away into something reusable.
-  /** Loads the CSS resets needed for the module to work correctly. */
-  private _loadResets() {
-    if (!activeApps.has(this._appRef)) {
-      activeApps.add(this._appRef);
-
-      const componentRef = createComponent(_ResetsLoader, {
-        environmentInjector: this._environmentInjector,
-      });
-
-      this._appRef.onDestroy(() => {
-        activeApps.delete(this._appRef);
-        if (activeApps.size === 0) {
-          componentRef.destroy();
-        }
-      });
-    }
-  }
 }