fix(devtools): show properly dynamically inserted content with DOM APIs (rangle/angular-devtools#828)

Fix rangle/angular-devtools#791

Build the render tree starting from the root node of the application.
This fix is applicable only for v12+ apps that are using the latest
debugging APIs.

projects/ng-devtools-backend/src/lib/directive-forest/render-tree.spec.ts

@@ -74,4 +74,28 @@ describe('render tree extraction', () => {
     expect(rtree[0].children.length).toBe(1);
     expect(rtree[0].children[0].children.length).toBe(0);
   });
+
+  it('should go all the way to the root element to look up for nodes', () => {
+    const rootNode = document.createElement('body');
+    const siblingNode = document.createElement('section');
+    const appNode = document.createElement('app');
+    const childNode = document.createElement('div');
+    const childComponentNode = document.createElement('child');
+    rootNode.appendChild(appNode);
+    rootNode.appendChild(siblingNode);
+    appNode.appendChild(childNode);
+    childNode.appendChild(childComponentNode);
+
+    const appComponent: any = {};
+    const childComponent: any = {};
+    const siblingComponent: any = {};
+    componentMap.set(siblingNode, siblingComponent);
+    componentMap.set(appNode, appComponent);
+    componentMap.set(childComponentNode, childComponent);
+
+    const rtree = treeStrategy.build(appNode);
+    expect(rtree[0].children.length).toBe(1);
+    expect(rtree[0].children[0].children.length).toBe(0);
+    expect(rtree[1].component?.instance).toBe(siblingComponent);
+  });
 });

projects/ng-devtools-backend/src/lib/directive-forest/render-tree.ts

@@ -56,6 +56,11 @@ export class RTreeStrategy {
   }
 
   build(element: Element): ComponentTreeNode[] {
+    // We want to start from the root element so that we can find components which are attached to the application ref
+    // and which host elements have been inserted with DOM APIs.
+    while (element.parentElement) {
+      element = element.parentElement;
+    }
     const getComponent = (window as any).ng.getComponent as (element: Element) => {};
     const getDirectives = (window as any).ng.getDirectives as (node: Node) => {}[];
     const result = extractViewTree(element, [], getComponent, getDirectives);