diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
index 6437233cb1..4d22ddc8d2 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@@ -1,6 +1,6 @@
 <ul class="navbar-nav">
   <ng-container
-    *ngFor="let route of visibleRoutes$ | async; trackBy: trackByFn"
+    *ngFor="let route of routes.visible$ | async; trackBy: trackByFn"
     [ngTemplateOutlet]="route?.children?.length ? dropdownLink : defaultLink"
     [ngTemplateOutletContext]="{ $implicit: route }"
   >
@@ -8,7 +8,7 @@
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
-      <a class="nav-link" [routerLink]="[route.url]"
+      <a class="nav-link" [routerLink]="[route.path]"
         ><i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
         {{ route.name | abpLocalization }}</a
       >
@@ -44,27 +44,23 @@
         (click)="$event.preventDefault(); $event.stopPropagation()"
         [class.d-block]="smallScreen && navbarRootDropdown.expand"
       >
-        <ng-template
-          #forTemplate
-          ngFor
-          [ngForOf]="route.children"
-          [ngForTrackBy]="trackByFn"
-          [ngForTemplate]="childWrapper"
-        ></ng-template>
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }"></ng-container>
       </div>
     </li>
   </ng-template>
 
-  <ng-template #childWrapper let-child>
-    <ng-template
-      [ngTemplateOutlet]="child?.children?.length ? dropdownChild : defaultChild"
-      [ngTemplateOutletContext]="{ $implicit: child }"
-    ></ng-template>
+  <ng-template #forTemplate let-route>
+    <ng-container *ngFor="let child of route.children">
+      <ng-template
+        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
+        [ngTemplateOutletContext]="{ $implicit: child }"
+      ></ng-template>
+    </ng-container>
   </ng-template>
 
   <ng-template #defaultChild let-child>
     <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-      <a class="dropdown-item" [routerLink]="[child.url]">
+      <a class="dropdown-item" [routerLink]="[child.path]">
         <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
         {{ child.name | abpLocalization }}</a
       >
@@ -97,12 +93,7 @@
         class="dropdown-menu border-0 shadow-sm"
         [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
       >
-        <ng-template
-          ngFor
-          [ngForOf]="child.children"
-          [ngForTrackBy]="trackByFn"
-          [ngForTemplate]="childWrapper"
-        ></ng-template>
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>
       </div>
     </div>
   </ng-template>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
index 2ed204e0b0..8b73c8ee29 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
@@ -1,37 +1,14 @@
-import { ABP, ConfigState } from '@abp/ng.core';
-import { Component, Input, Renderer2, TrackByFunction } from '@angular/core';
-import { Select } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
+import { Component, Input, TrackByFunction } from '@angular/core';
 
 @Component({
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
 })
 export class RoutesComponent {
-  @Select(ConfigState.getOne('routes'))
-  routes$: Observable<ABP.FullRoute[]>;
+  @Input() smallScreen: boolean;
 
-  @Input()
-  smallScreen: boolean;
+  trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-  get visibleRoutes$(): Observable<ABP.FullRoute[]> {
-    return this.routes$.pipe(map(routes => getVisibleRoutes(routes)));
-  }
-
-  trackByFn: TrackByFunction<ABP.FullRoute> = (_, item) => item.name;
-
-  constructor(private renderer: Renderer2) {}
-}
-
-function getVisibleRoutes(routes: ABP.FullRoute[]) {
-  return routes.reduce((acc, val) => {
-    if (val.invisible) return acc;
-
-    if (val.children && val.children.length) {
-      val.children = getVisibleRoutes(val.children);
-    }
-
-    return [...acc, val];
-  }, []);
+  constructor(public readonly routes: RoutesService) {}
 }