refactor(devtools): use WeakRef in idToInjector map for injector cleanup

AleksanderBodurri · mattrbeck · commit 84d757446bf3 · 2026-05-12T11:37:07.000-07:00
Replace the manual injectorsSeen cleanup mechanism with WeakRef and FinalizationRegistry. The old approach worked but coupled cleanup to the UI change detection and required tracking seen injectors across traversal. WeakRef lets the browser handle this naturally, removing the injectorsSeen set and the manual cleanup loop.
diff --git a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
@@ -40,7 +40,6 @@ import {
   getInjectorResolutionPath,
   getLatestComponentState,
   idToInjector,
-  injectorsSeen,
   isElementInjector,
   getDirectiveCdStrategy,
   logValue,
@@ -146,22 +145,6 @@ const getLatestComponentExplorerViewCallback =
       ngDebugDependencyInjectionApiIsSupported(),
     );
 
-    // cleanup injector id mappings
-    for (const injectorId of idToInjector.keys()) {
-      if (!injectorsSeen.has(injectorId)) {
-        const injector = idToInjector.get(injectorId)!;
-        if (isElementInjector(injector)) {
-          const element = getElementInjectorElement(injector);
-          if (element) {
-            nodeInjectorToResolutionPath.delete(element);
-          }
-        }
-
-        idToInjector.delete(injectorId);
-      }
-    }
-    injectorsSeen.clear();
-
     if (!query) {
       messageBus.emit('latestComponentExplorerView', [{forest}]);
       return;
@@ -479,21 +462,17 @@ function getNodeDIResolutionPath(node: ComponentTreeNode): SerializedInjector[]
     nodeInjectorToResolutionPath.set(element, serializeResolutionPath(resolutionPaths));
   }
 
-  const serializedPath = nodeInjectorToResolutionPath.get(element)!;
-  for (const injector of serializedPath) {
-    injectorsSeen.add(injector.id);
-  }
-
-  return serializedPath;
+  return nodeInjectorToResolutionPath.get(element)!;
 }
 
 const getInjectorProvidersCallback =
   (messageBus: MessageBus<Events>) => (injector: SerializedInjector) => {
-    if (!idToInjector.has(injector.id)) {
+    const resolvedInjector = idToInjector.get(injector.id)?.deref();
+    if (!resolvedInjector) {
       return;
     }
 
-    const providerRecords = getInjectorProviders(idToInjector.get(injector.id)!);
+    const providerRecords = getInjectorProviders(resolvedInjector);
     const allProviderRecords: SerializedProviderRecord[] = [];
 
     const tokenToRecords: Map<any, SerializedProviderRecord[]> = new Map();
@@ -544,12 +523,11 @@ const logProvider = (
   serializedInjector: SerializedInjector,
   serializedProvider: SerializedProviderRecord,
 ): void => {
-  if (!idToInjector.has(serializedInjector.id)) {
+  const injector = idToInjector.get(serializedInjector.id)?.deref();
+  if (!injector) {
     return;
   }
 
-  const injector = idToInjector.get(serializedInjector.id)!;
-
   const providerRecords = getInjectorProviders(injector);
 
   console.group(
@@ -621,11 +599,11 @@ const getInjectorInstance = (
   serializedInjector: SerializedInjector,
   serializedProvider: SerializedProviderRecord,
 ) => {
-  if (!idToInjector.has(serializedInjector.id)) {
+  const injector = idToInjector.get(serializedInjector.id)?.deref();
+  if (!injector) {
     return;
   }
 
-  const injector = idToInjector.get(serializedInjector.id)!;
   const providerRecords = getInjectorProviders(injector);
 
   if (typeof serializedProvider.index === 'number') {
diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts
@@ -53,14 +53,26 @@ import {unwrapSignal} from '../utils';
 
 export const injectorToId = new WeakMap<Injector | HTMLElement, string>();
 export const nodeInjectorToResolutionPath = new WeakMap<HTMLElement, SerializedInjector[]>();
-export const idToInjector = new Map<string, Injector>();
-export const injectorsSeen = new Set<string>();
+export const idToInjector = new Map<string, WeakRef<Injector>>();
+const injectorFinalizer = new FinalizationRegistry<string>((id) => {
+  idToInjector.delete(id);
+});
 let injectorId = 0;
 
 export function getInjectorId() {
   return `${injectorId++}`;
 }
 
+function getOrCreateInjectorId(key: Injector | HTMLElement, injector: Injector): string {
+  if (!injectorToId.has(key)) {
+    const newId = getInjectorId();
+    injectorToId.set(key, newId);
+    idToInjector.set(newId, new WeakRef(injector));
+    injectorFinalizer.register(injector, newId);
+  }
+  return injectorToId.get(key)!;
+}
+
 const INTERNAL_TOKENS = [
   'ElementRef',
   'Renderer2',
@@ -172,18 +184,8 @@ export const getLatestComponentState = (
 };
 
 function serializeElementInjectorWithId(injector: Injector): SerializedInjector | null {
-  let id: string;
   const element = getElementInjectorElement(injector);
-
-  if (!injectorToId.has(element)) {
-    id = getInjectorId();
-    injectorToId.set(element, id);
-    idToInjector.set(id, injector);
-  }
-
-  id = injectorToId.get(element)!;
-  idToInjector.set(id, injector);
-  injectorsSeen.add(id);
+  const id = getOrCreateInjectorId(element, injector);
 
   const serializedInjector = serializeInjector(injector);
   if (serializedInjector === null) {
@@ -202,17 +204,7 @@ function serializeInjectorWithId(injector: Injector): SerializedInjector | null
 }
 
 function serializeEnvironmentInjectorWithId(injector: Injector): SerializedInjector | null {
-  let id: string;
-
-  if (!injectorToId.has(injector)) {
-    id = getInjectorId();
-    injectorToId.set(injector, id);
-    idToInjector.set(id, injector);
-  }
-
-  id = injectorToId.get(injector)!;
-  idToInjector.set(id, injector);
-  injectorsSeen.add(id);
+  const id = getOrCreateInjectorId(injector, injector);
 
   const serializedInjector = serializeInjector(injector);
   if (serializedInjector === null) {
diff --git a/devtools/tsconfig.json b/devtools/tsconfig.json
@@ -13,8 +13,8 @@
     "moduleResolution": "bundler",
     "esModuleInterop": true,
     "importHelpers": true,
-    "target": "es2020",
-    "lib": ["es2020", "dom", "dom.iterable"],
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
     "types": ["chrome"],
     // TODO: Have an IDE specific tsconfig file
     "paths": {
