feat: add and use utility for finding closest routes

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -6,7 +6,7 @@ import { ABP } from '../models';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import { RoutesService } from '../services/routes.service';
 import { ReplaceableComponentsState } from '../states/replaceable-components.state';
-import { getRoutePath } from '../utils/route-utils';
+import { findRoute, getRoutePath } from '../utils/route-utils';
 import { takeUntilDestroy } from '../utils/rxjs-utils';
 import { TreeNode } from '../utils/tree-utils';
 
@@ -36,10 +36,11 @@ export class DynamicLayoutComponent implements OnDestroy {
     router.events.pipe(takeUntilDestroy(this)).subscribe(event => {
       if (event instanceof NavigationEnd) {
         let expectedLayout = (route.snapshot.data || {}).layout;
-        const path = getRoutePath(router);
 
         if (!expectedLayout) {
-          let node = { parent: routes.search({ path }) } as TreeNode<ABP.Route>;
+          let node = findRoute(routes, getRoutePath(router));
+          node = { parent: node } as TreeNode<ABP.Route>;
+
           while (node.parent) {
             node = node.parent;
 

npm/ng-packs/packages/core/src/lib/services/routes.service.ts

@@ -77,7 +77,7 @@ export abstract class AbstractTreeService<T extends object> {
     return this.publish(flatItems, visibleItems);
   }
 
-  find(predicate: (item: TreeNode<T>) => boolean, tree = this.tree) {
+  find(predicate: (item: TreeNode<T>) => boolean, tree = this.tree): TreeNode<T> | null {
     return tree.reduce(
       (acc, node) => (acc ? acc : predicate(node) ? node : this.find(predicate, node.children)),
       null,

npm/ng-packs/packages/core/src/lib/tests/route-utils.spec.ts

@@ -2,13 +2,35 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { createRoutingFactory, SpectatorRouting } from '@ngneat/spectator/jest';
 import { RouterOutletComponent } from '../components';
-import { getRoutePath } from '../utils/route-utils';
+import { RoutesService } from '../services/routes.service';
+import { findRoute, getRoutePath } from '../utils/route-utils';
 
 // tslint:disable-next-line
 @Component({ template: '' })
 class DummyComponent {}
 
 describe('Route Utils', () => {
+  describe('#findRoute', () => {
+    const node = { path: '/foo' };
+
+    test.each`
+      path              | expected | count
+      ${'/foo/bar/baz'} | ${node}  | ${3}
+      ${'/foo/bar'}     | ${node}  | ${2}
+      ${'/foo'}         | ${node}  | ${1}
+      ${'/'}            | ${null}  | ${1}
+    `(
+      'should find $expected in $count turns when path is $path',
+      async ({ path, expected, count }) => {
+        const find = jest.fn(cb => (cb(node) ? node : null));
+        const routes = ({ find } as any) as RoutesService;
+        const route = findRoute(routes, path);
+        expect(route).toBe(expected);
+        expect(find).toHaveBeenCalledTimes(count);
+      },
+    );
+  });
+
   describe('#getRoutePath', () => {
     let spectator: SpectatorRouting<RouterOutletComponent>;
     const createRouting = createRoutingFactory({

npm/ng-packs/packages/core/src/lib/utils/route-utils.ts

@@ -1,4 +1,21 @@
 import { PRIMARY_OUTLET, Router, UrlSegmentGroup } from '@angular/router';
+import { ABP } from '../models/common';
+import { RoutesService } from '../services/routes.service';
+import { TreeNode } from './tree-utils';
+
+export function findRoute(routes: RoutesService, path: string): TreeNode<ABP.Route> {
+  let node = routes.find(route => route.path === path);
+
+  return node || path === '/'
+    ? node
+    : findRoute(
+        routes,
+        path
+          .split('/')
+          .slice(0, -1)
+          .join('/'),
+      );
+}
 
 export function getRoutePath(router: Router) {
   const emptyGroup = { segments: [] } as UrlSegmentGroup;

npm/ng-packs/packages/theme-shared/src/lib/providers/route.provider.ts

@@ -10,7 +10,7 @@ export function configureRoutes(routes: RoutesService) {
   return () => {
     routes.add([
       {
-        path: '',
+        path: '/',
         name: eThemeSharedRouteNames.Administration,
         iconClass: 'fa fa-wrench',
         order: 1,