feat(devtools): Modify buildDirectiveForest to set default values for properties that will not be included in the forest returned by non-Angular frameworks.

csmick · csmick · commit 1f951c8a74e8 · 2026-04-13T14:10:20.000-07:00
Set default values for the `directives`, `element`, `hydration`, and `component.isElement` properties of every `ComponentTreeNode` returned by `ng.getComponentForest` for non-Angular apps.
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
@@ -686,7 +686,19 @@ function discoverNonApplicationRootComponents(element: Element, roots: Set<Eleme
 export const buildDirectiveForest = (): ComponentTreeNode[] => {
   const ng = ngDebugClient();
   if ((ng as any).getComponentForest) {
-    return (ng as any).getComponentForest();
+    const forest: ComponentTreeNode[] = (ng as any).getComponentForest();
+    const frontier = [...forest];
+    while (frontier.length) {
+      const node = frontier.pop()!;
+      node.directives = [];
+      node.element = node.nativeElement?.nodeName.toLowerCase() ?? '';
+      node.hydration = null;
+      node.component!.isElement = false;
+      for (const child of node.children) {
+        frontier.push(child);
+      }
+    }
+    return forest;
   }
   return buildDirectiveForestWithStrategy(getRootElements());
 };
