fix(devtools): call ng.getDirectiveMetadata with the component instance (angular#60991)

`ng.getDirectiveMetadata` receives the component instance, not the raw DOM element.

This assumes that `ng.getComponent` is implemented in all environments and that the root element itself is a component.

PR Close angular#60991

Author: dgp1130

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.spec.ts

@@ -25,9 +25,10 @@ const mockRoot = () => {
 };
 
 /** Creates an `ng` object with a `getDirectiveMetadata` mock. */
-const createNgWithDirectiveMetadata = (
-  framework: Framework,
-): Partial<Record<keyof Ng, () => void>> => ({
+const fakeNgGlobal = (framework: Framework): Partial<Record<keyof Ng, () => void>> => ({
+  getComponent(): {} {
+    return {};
+  },
   getDirectiveMetadata(): Partial<ɵDirectiveDebugMetadata> {
     return {
       framework,
@@ -79,15 +80,15 @@ describe('ng-debug-api', () => {
     beforeEach(() => mockRoot());
 
     it('should support Profiler API', () => {
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.Angular);
+      (globalThis as any).ng = fakeNgGlobal(Framework.Angular);
       expect(ngDebugProfilerApiIsSupported()).toBeTrue();
 
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.ACX);
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
       expect(ngDebugProfilerApiIsSupported()).toBeTrue();
     });
 
     it('should NOT support Profiler API', () => {
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.Wiz);
+      (globalThis as any).ng = fakeNgGlobal(Framework.Wiz);
 
       expect(ngDebugRoutesApiIsSupported()).toBeFalse();
     });
@@ -99,15 +100,15 @@ describe('ng-debug-api', () => {
     beforeEach(() => mockRoot());
 
     it('should support Routes API', () => {
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.Angular);
+      (globalThis as any).ng = fakeNgGlobal(Framework.Angular);
       expect(ngDebugRoutesApiIsSupported()).toBeTrue();
 
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.ACX);
+      (globalThis as any).ng = fakeNgGlobal(Framework.ACX);
       expect(ngDebugRoutesApiIsSupported()).toBeTrue();
     });
 
     it('should NOT support Routes API', () => {
-      (globalThis as any).ng = createNgWithDirectiveMetadata(Framework.Wiz);
+      (globalThis as any).ng = fakeNgGlobal(Framework.Wiz);
 
       expect(ngDebugRoutesApiIsSupported()).toBeFalse();
     });

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/ng-debug-api.ts

@@ -53,7 +53,10 @@ export function ngDebugProfilerApiIsSupported(): boolean {
   const roots = getRoots();
   return (
     !!roots.length &&
-    !roots.some((el) => ng.getDirectiveMetadata?.(el)?.framework === Framework.Wiz)
+    !roots.some((el) => {
+      const comp = ng.getComponent!(el)!;
+      return ng.getDirectiveMetadata?.(comp)?.framework === Framework.Wiz;
+    })
   );
 }
 
@@ -66,6 +69,9 @@ export function ngDebugRoutesApiIsSupported(): boolean {
   const roots = getRoots();
   return (
     !!roots.length &&
-    !roots.some((el) => ng.getDirectiveMetadata?.(el)?.framework === Framework.Wiz)
+    !roots.some((el) => {
+      const comp = ng.getComponent!(el)!;
+      return ng.getDirectiveMetadata?.(comp)?.framework === Framework.Wiz;
+    })
   );
 }