From ecfcaba3b16dcee86ad97d29f283d69a7028a3ff Mon Sep 17 00:00:00 2001
From: AleksanderBodurri <alexbodurri1117@gmail.com>
Date: Sun, 21 Sep 2025 16:30:54 -0400
Subject: [PATCH] feat(devtools): Use "App Root" as name for root of router
 tree.

Previously '/' could cause confusion with other routes that use a path here. I think because this node is unique in that it is not actually a "Route" we should make it clear with the label that is simply the App Root.
---
 .../src/lib/router-tree.spec.ts               | 24 +++++++------------
 .../src/lib/router-tree.ts                    |  6 ++---
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts
index 9cf2e0af33f..46d5fc5fed1 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/router-tree.spec.ts
@@ -13,42 +13,36 @@ describe('parseRoutes', () => {
     const routes: any[] = [];
     const parsedRoutes = parseRoutes(routes as any);
     expect(parsedRoutes).toEqual({
-      component: 'no-name',
-      path: '/',
+      component: 'App Root',
+      path: 'App Root',
       children: [],
       data: [],
       isAux: false,
       isLazy: false,
-      isActive: false,
+      isActive: true,
       isRedirect: false,
     });
   });
 
   it('should work with single route', () => {
     const nestedRouter = {
-      rootComponentType: {
-        name: 'homeComponent',
-      },
       config: [],
     };
     const parsedRoutes = parseRoutes(nestedRouter as any);
     expect(parsedRoutes).toEqual({
-      'component': 'homeComponent',
-      'path': '/',
+      'component': 'App Root',
+      'path': 'App Root',
       'data': [],
       'children': [],
       'isAux': false,
       'isLazy': false,
-      'isActive': false,
+      'isActive': true,
       isRedirect: false,
     });
   });
 
   it('should work with nested routes', () => {
     const nestedRouter = {
-      rootComponentType: {
-        name: 'homeComponent',
-      },
       config: [
         {
           outlet: 'outlet',
@@ -96,8 +90,8 @@ describe('parseRoutes', () => {
     };
     const parsedRoutes = parseRoutes(nestedRouter as any);
     expect(parsedRoutes).toEqual({
-      'component': 'homeComponent',
-      'path': '/',
+      'component': 'App Root',
+      'path': 'App Root',
       'children': [
         {
           'component': 'component-one',
@@ -186,7 +180,7 @@ describe('parseRoutes', () => {
       'isLazy': false,
       'isRedirect': false,
       'data': [],
-      'isActive': false,
+      'isActive': true,
     } as any);
   });
 });
diff --git a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
index 2a19a2c8bb2..34b5146f5ac 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/router-tree.ts
@@ -18,18 +18,18 @@ type Router = any;
 
 export function parseRoutes(router: Router): Route {
   const currentUrl = router.stateManager?.routerState?.snapshot?.url;
-  const rootName = (router as any).rootComponentType?.name || 'no-name';
+  const rootName = 'App Root';
   const rootChildren = router.config;
 
   const root: Route = {
     component: rootName,
-    path: '/',
+    path: rootName,
     children: rootChildren ? assignChildrenToParent(null, rootChildren, currentUrl) : [],
     isAux: false,
     isLazy: false,
     isRedirect: false,
+    isActive: true, // Root is always active.
     data: [],
-    isActive: currentUrl === '/',
   };
 
   return root;