angular · hawkgs · May 15, 2026
diff --git a/devtools/projects/ng-devtools-backend/src/lib/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/BUILD.bazel
@@ -56,8 +56,8 @@ ts_project(
     name = "property_mutation",
     srcs = ["property-mutation.ts"],
     deps = [
-        ":utils",
         "//:node_modules/@angular/core",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
     ],
 )
 
@@ -111,35 +111,6 @@ ts_project(
     ],
 )
 
-ts_project(
-    name = "utils",
-    srcs = [
-        "serialization-utils.ts",
-        "utils.ts",
-    ],
-    deps = [
-        "//:node_modules/@angular/core",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
-    ],
-)
-
-zoneless_web_test_suite(
-    name = "utils_test",
-    deps = [
-        ":utils_test_lib",
-    ],
-)
-
-ts_test_library(
-    name = "utils_test_lib",
-    srcs = [
-        "serialization-utils.spec.ts",
-    ],
-    deps = [
-        ":utils",
-    ],
-)
-
 ts_project(
     name = "version",
     srcs = ["version.ts"],
@@ -174,13 +145,14 @@ ts_project(
         ":interfaces",
         ":router_tree",
         ":set_console_reference",
-        ":utils",
+        "//:node_modules/@angular/core",
         "//:node_modules/rxjs",
         "//devtools/projects/ng-devtools-backend/src/lib/component-inspector",
         "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
         "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
         "//devtools/projects/shared-utils",
     ],

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
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {ɵDebugSignalGraph} from '@angular/core';
 import {
   ComponentExplorerViewQuery,
   ComponentType,
@@ -57,10 +58,11 @@ import {getRouterCallableConstructRef, parseRoutes, RoutePropertyType} from './r
 import {ngDebugClient, ngDebugDependencyInjectionApiIsSupported} from './ng-debug-api/ng-debug-api';
 import {setConsoleReference} from './set-console-reference';
 import {serializeDirectiveState, serializeValue} from './state-serializer/state-serializer';
-import {runOutsideAngular, unwrapSignal} from './utils';
+import {runOutsideAngular, unwrapSignal} from './utils/general';
 import {DirectiveForestHooks} from './hooks/hooks';
 import {getSupportedApis} from './ng-debug-api/supported-apis';
-import {sanitizeObject} from './serialization-utils';
+import {sanitizeObject} from './utils/serialization';
+import {SignalGraphRef} from './utils/signal-graph-ref';
 
 type InspectorRef = {ref: ComponentInspector | null};
 
@@ -262,7 +264,21 @@ const getSignalNestedPropertiesCallback =
 
     const ng = ngDebugClient();
 
-    const signalGraph = ng.ɵgetSignalGraph?.(injector);
+    let signalGraph: ɵDebugSignalGraph | undefined;
+
+    // Considering that the inspection of signal value nested properties
+    // usually involves multiple requests, we store the signal graph
+    // during the first call. We keep only the last requested signal graph
+    // to avoid filling the heap with graphs that may not be needed.
+    if (componentSignalGraphRef.exists(node.nativeElement!)) {
+      signalGraph = componentSignalGraphRef.deref(node.nativeElement!);
+    } else {
+      signalGraph = ng.ɵgetSignalGraph?.(injector);
+      if (signalGraph) {
+        componentSignalGraphRef.set(node.nativeElement!, signalGraph);
+      }
+    }
+
     if (!signalGraph) {
       return emitEmpty();
     }
@@ -493,7 +509,7 @@ const getInjectorProvidersCallback =
 
     const serializedProviderRecords: SerializedProviderRecord[] = [];
 
-    for (const [token, records] of tokenToRecords.entries()) {
+    for (const [, records] of tokenToRecords.entries()) {
       const multiRecords = records.filter((record) => record.multi);
       const nonMultiRecords = records.filter((record) => !record.multi);
 
@@ -617,6 +633,10 @@ const getInjectorInstance = (
 };
 
 const getSignalGraphCallback = (messageBus: MessageBus<Events>) => (element: ElementPosition) => {
+  // We assume that a new request for a signal graph
+  // should invalidate the current ref cache.
+  componentSignalGraphRef.clear();
+
   const ng = ngDebugClient();
 
   // get injector from position
@@ -664,3 +684,13 @@ export function sanitizeRouteData(route: Route): Route {
 
   return route;
 }
+
+/**
+ * Keeps a reference to the last requested signal graph.
+ * This should save us from needlessly calling `ng.ɵgetSignalGraph`
+ * when we are still managing the same/last graph (e.g. inspecting
+ * signal value nested properties). The ref is tied to the host element.
+ *
+ * Note: If the element is destroyed, the graph is garbage collected.
+ */
+const componentSignalGraphRef = new SignalGraphRef<Node>();
diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-inspector/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/component-inspector/BUILD.bazel
@@ -24,9 +24,9 @@ ts_test_library(
         "//:node_modules/@angular/core",
         "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )

diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-tree/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/component-tree/BUILD.bazel
@@ -21,10 +21,10 @@ ts_project(
         "//:node_modules/@angular/core",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
         "//devtools/projects/ng-devtools-backend/src/lib:property_mutation",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
         "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )

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
@@ -49,7 +49,7 @@ import {mutateNestedProp} from '../property-mutation';
 import {ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType} from '../interfaces';
 import {getAppRoots} from './get-roots';
 import {AcxChangeDetectionStrategy, ChangeDetectionStrategy, Framework} from './core-enums';
-import {unwrapSignal} from '../utils';
+import {unwrapSignal} from '../utils/general';
 
 export const injectorToId = new WeakMap<Injector | HTMLElement, string>();
 export const nodeInjectorToResolutionPath = new WeakMap<HTMLElement, SerializedInjector[]>();

diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/BUILD.bazel
@@ -14,10 +14,10 @@ ts_project(
         "//:node_modules/semver",
         "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib:version",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
         "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )
@@ -31,7 +31,7 @@ ts_test_library(
         ":directive-forest",
         "//:node_modules/@angular/core",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
     ],
 )
 

diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts
@@ -10,7 +10,7 @@ import semver from 'semver';
 
 import {getDirectiveName} from '../highlighter';
 import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces';
-import {isCustomElement} from '../utils';
+import {isCustomElement} from '../utils/general';
 import {VERSION} from '../version';
 
 let HEADER_OFFSET = 19;

diff --git a/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts
@@ -14,7 +14,7 @@ import {HydrationStatus} from '../../../../protocol';
 
 import {ComponentTreeNode} from '../interfaces';
 import {ngDebugClient} from '../ng-debug-api/ng-debug-api';
-import {isCustomElement} from '../utils';
+import {isCustomElement} from '../utils/general';
 import {
   ControlFlowBlocksIterator,
   createControlFlowTreeNode,

diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/hooks/BUILD.bazel
@@ -15,8 +15,8 @@ ts_project(
         ":identity_tracker",
         "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks/profiler",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )

diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts
@@ -17,7 +17,7 @@ import {
 
 import {getDirectiveName} from '../highlighter';
 import {ComponentTreeNode} from '../interfaces';
-import {isCustomElement, runOutsideAngular} from '../utils';
+import {isCustomElement, runOutsideAngular} from '../utils/general';
 
 import {initializeOrGetDirectiveForestHooks} from '.';
 import {DirectiveForestHooks} from './hooks';

diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/BUILD.bazel
@@ -11,10 +11,10 @@ ts_project(
     deps = [
         "//:node_modules/@angular/core",
         "//:node_modules/rxjs",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks:identity_tracker",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
@@ -9,7 +9,7 @@
 import {ɵProfilerEvent} from '@angular/core';
 import {getDirectiveHostElement} from '../../directive-forest';
 import {ngDebugClient} from '../../ng-debug-api/ng-debug-api';
-import {runOutsideAngular} from '../../utils';
+import {runOutsideAngular} from '../../utils/general';
 import {IdentityTracker, NodeArray} from '../identity-tracker';
 
 import {getLifeCycleName, Hooks, Profiler} from './shared';

diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/polyfill.ts
@@ -11,7 +11,7 @@ import {
   getLViewFromDirectiveOrElementInstance,
   METADATA_PROPERTY_NAME,
 } from '../../directive-forest';
-import {runOutsideAngular} from '../../utils';
+import {runOutsideAngular} from '../../utils/general';
 import {IdentityTracker, NodeArray} from '../identity-tracker';
 
 import {getLifeCycleName, Profiler} from './shared';

diff --git a/devtools/projects/ng-devtools-backend/src/lib/property-mutation.ts b/devtools/projects/ng-devtools-backend/src/lib/property-mutation.ts
@@ -7,7 +7,7 @@
  */
 
 import type {Signal, WritableSignal} from '@angular/core';
-import {isSignal} from './utils';
+import {isSignal} from './utils/general';
 
 /** Represents a property access operation. */
 interface PropertyAccess {

diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/BUILD.bazel
@@ -9,7 +9,7 @@ ng_project(
         exclude = ["*.spec.ts"],
     ),
     deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
+        "//devtools/projects/ng-devtools-backend/src/lib/utils",
         "//devtools/projects/protocol",
     ],
 )

diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/object-utils.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {unwrapSignal} from '../utils';
+import {unwrapSignal} from '../utils/general';
 
 // Intentionally do not include all the prototype (Except for getters and setters)
 // because it contains inherited methods (hasOwnProperty, etc.). Also ignore symbols

diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/prop-type.ts
@@ -8,7 +8,7 @@
 
 import {PropType} from '../../../../protocol';
 
-import {isSignal, safelyReadSignalValue} from '../utils';
+import {isSignal, safelyReadSignalValue} from '../utils/general';
 
 const commonTypes = {
   boolean: PropType.Boolean,

diff --git a/...ls/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts b/...ls/projects/ng-devtools-backend/src/lib/state-serializer/serialized-descriptor-factory.ts
@@ -8,7 +8,7 @@
 
 import {ContainerType, Descriptor, NestedProp, PropType} from '../../../../protocol';
 
-import {isSignal, safelyReadSignalValue, unwrapSignal} from '../utils';
+import {isSignal, safelyReadSignalValue, unwrapSignal} from '../utils/general';
 
 import {getDescriptor, getKeys} from './object-utils';
 

diff --git a/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts b/devtools/projects/ng-devtools-backend/src/lib/state-serializer/state-serializer.ts
@@ -8,7 +8,7 @@
 
 import {ContainerType, Descriptor, NestedProp, PropType} from '../../../../protocol';
 
-import {isSignal, unwrapSignal} from '../utils';
+import {isSignal, unwrapSignal} from '../utils/general';
 
 import {getKeys} from './object-utils';
 import {getPropType} from './prop-type';

diff --git a/devtools/projects/ng-devtools-backend/src/lib/utils/BUILD.bazel b/devtools/projects/ng-devtools-backend/src/lib/utils/BUILD.bazel
@@ -0,0 +1,34 @@
+load("//devtools/tools:defaults.bzl", "ng_project", "ts_test_library", "zoneless_web_test_suite")
+
+package(default_visibility = ["//devtools:__subpackages__"])
+
+ng_project(
+    name = "utils",
+    srcs = glob(
+        include = ["*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+    ],
+)
+
+ts_test_library(
+    name = "test_lib",
+    srcs = [
+        "serialization.spec.ts",
+        "signal-graph-ref.spec.ts",
+    ],
+    deps = [
+        ":utils",
+        "//:node_modules/@angular/core",
+    ],
+)
+
+zoneless_web_test_suite(
+    name = "test",
+    deps = [
+        ":test_lib",
+    ],
+)
diff --git a/...ects/ng-devtools-backend/src/lib/utils.ts → ...devtools-backend/src/lib/utils/general.ts b/...ects/ng-devtools-backend/src/lib/utils.ts → ...devtools-backend/src/lib/utils/general.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ngDebugApiIsSupported, ngDebugClient} from './ng-debug-api/ng-debug-api';
+import {ngDebugApiIsSupported, ngDebugClient} from '../ng-debug-api/ng-debug-api';
 
 export const runOutsideAngular = (f: () => void): void => {
   const w = window as any;

diff --git a/...ckend/src/lib/serialization-utils.spec.ts → ...ckend/src/lib/utils/serialization.spec.ts b/...ckend/src/lib/serialization-utils.spec.ts → ...ckend/src/lib/utils/serialization.spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {sanitizeObject} from './serialization-utils';
+import {sanitizeObject} from './serialization';
 
 describe('sanitizeObject', () => {
   it('should not change valid object', () => {

diff --git a/...ls-backend/src/lib/serialization-utils.ts → ...ls-backend/src/lib/utils/serialization.ts b/...ls-backend/src/lib/serialization-utils.ts → ...ls-backend/src/lib/utils/serialization.ts