fix(overlay): walkAngularTree() drops nested child components inside HTML wrapper elements #11

Summary

In packages/ng-devtools/src/overlay.ts, walkAngularTree() traverses the DOM to build the live component hierarchy. However, the traversal immediately exits (if (!component) return;) whenever an element is not an Angular component host.

Because standard Angular templates wrap nested child components inside common HTML layout elements (such as <div class="container">, <main>, <section>, or <ul>), ng.getComponent() on those wrapper elements returns null. This causes walkAngularTree() to abort recursion prematurely, dropping all nested child components from the DevTools Component Tree and the MCP ng-devtools:component-tree agent resource.

Code Reference

In packages/ng-devtools/src/overlay.ts (lines 108–125):

function walkAngularTree(el: Element, out: ComponentTreeNode[], ng: any) {
  const component = ng.getComponent(el);
  if (!component) return; // Aborts traversal if element is not a component

  const node: ComponentTreeNode = {
    id: generateId(el),
    selector: el.tagName.toLowerCase(),
    tagName: el.tagName.toLowerCase(),
    children: [],
    inputs: tryGetInputs(component),
  };

  for (const child of el.querySelectorAll(':scope > *')) {
    walkAngularTree(child, node.children, ng);
  }

  out.push(node);
}

Reproduction & Failure Scenario

Given an Angular component template with standard HTML wrappers:

<app-root>
  <div class="app-layout">
    <app-header></app-header>
    <main>
      <app-product-list></app-product-list>
    </main>
  </div>
</app-root>

1. walkAngularTree starts at <app-root> and inspects direct child <div class="app-layout">.
2. ng.getComponent(div) returns null (since <div> is a native DOM element, not a component host).
3. if (!component) return; fires immediately.
4. Neither <app-header> nor <app-product-list> are ever reached or added to node.children.
5. The resulting Component Tree contains only <app-root>.

Proposed Solution

Modify walkAngularTree so that if an element is not a component host, it continues recursing through its child DOM nodes and attaches any discovered child components to the current component node's children array:

function walkAngularTree(el: Element, out: ComponentTreeNode[], ng: any) {
  const component = ng.getComponent(el);

  if (component) {
    const node: ComponentTreeNode = {
      id: generateId(el),
      selector: el.tagName.toLowerCase(),
      tagName: el.tagName.toLowerCase(),
      children: [],
      inputs: tryGetInputs(component),
    };

    for (const child of el.children) {
      walkAngularTree(child, node.children, ng);
    }

    out.push(node);
  } else {
    // Continue traversing through non-component DOM wrapper nodes
    for (const child of el.children) {
      walkAngularTree(child, out, ng);
    }
  }
}

Affected Files

• packages/ng-devtools/src/overlay.ts