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.
This commit is contained in:
AleksanderBodurri 2025-09-21 16:30:54 -04:00 committed by Kristiyan Kostadinov
parent dd09da8ba2
commit ecfcaba3b1
2 changed files with 12 additions and 18 deletions

View file

@ -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);
});
});

View file

@ -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;