refactor(material/badge): use common service for loading structural s…

…tyles

Switches the badge to use the common style loading service to load its structural styles.

src/material/badge/BUILD.bazel

@@ -22,6 +22,7 @@ ng_module(
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
+        "//src/cdk/private",
         "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/common",

src/material/badge/badge.ts

@@ -9,14 +9,11 @@
 import {AriaDescriber, InteractivityChecker} from '@angular/cdk/a11y';
 import {DOCUMENT} from '@angular/common';
 import {
-  ApplicationRef,
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
-  createComponent,
   Directive,
   ElementRef,
-  EnvironmentInjector,
   inject,
   Inject,
   Input,
@@ -29,6 +26,7 @@ import {
   ANIMATION_MODULE_TYPE,
 } from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 let nextId = 0;
 
@@ -48,9 +46,6 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
 
 const BADGE_CONTENT_CLASS = 'mat-badge-content';
 
-/** Keeps track of the apps currently containing badges. */
-const badgeApps = new Set<ApplicationRef>();
-
 /**
  * Component used to load the structural styles of the badge.
  * @docs-private
@@ -162,22 +157,8 @@ export class MatBadge implements OnInit, OnDestroy {
     private _renderer: Renderer2,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
   ) {
-    const appRef = inject(ApplicationRef);
-
-    if (!badgeApps.has(appRef)) {
-      badgeApps.add(appRef);
-
-      const componentRef = createComponent(_MatBadgeStyleLoader, {
-        environmentInjector: inject(EnvironmentInjector),
-      });
-
-      appRef.onDestroy(() => {
-        badgeApps.delete(appRef);
-        if (badgeApps.size === 0) {
-          componentRef.destroy();
-        }
-      });
-    }
+    const styleLoader = inject(_CdkPrivateStyleLoader);
+    styleLoader.loadStyles(_MatBadgeStyleLoader);
 
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       const nativeElement = _elementRef.nativeElement;