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 e537c26f34..77e190957f 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
@@ -3,8 +3,7 @@
     <ng-container
       [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
       [ngTemplateOutletContext]="{ $implicit: route }"
-    >
-    </ng-container>
+    />
   }
 
   <ng-template #defaultLink let-route>
@@ -13,7 +12,7 @@
         @if (route.iconClass) {
           <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpLocalization }}
+        {{ route.name | abpLazyTranslate | async }}
       </a>
     </li>
   </ng-template>
@@ -40,7 +39,7 @@
           @if (route.iconClass) {
             <i [ngClass]="route.iconClass"></i>
           }
-          {{ route.name | abpLocalization }}
+          {{ route.name | abpLazyTranslate | async }}
         </a>
         <div
           #routeContainer
@@ -48,9 +47,7 @@
           (click)="$event.preventDefault(); $event.stopPropagation()"
           [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
         >
-          <ng-container
-            *ngTemplateOutlet="forTemplate; context: { $implicit: route }"
-          ></ng-container>
+          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
         </div>
       </li>
     }
@@ -61,7 +58,7 @@
       <ng-template
         [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
         [ngTemplateOutletContext]="{ $implicit: child }"
-      ></ng-template>
+      />
     }
   </ng-template>
 
@@ -105,7 +102,7 @@
         class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
         [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
       >
-        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </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 dfdca734a6..dc6b797446 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
@@ -2,6 +2,7 @@ import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
 import {
   Component,
   ElementRef,
+  inject,
   Input,
   QueryList,
   Renderer2,
@@ -15,6 +16,9 @@ import {
   templateUrl: 'routes.component.html',
 })
 export class RoutesComponent {
+  public readonly routesService = inject(RoutesService);
+  protected renderer = inject(Renderer2);
+
   @Input() smallScreen?: boolean;
 
   @ViewChildren('childrenContainer') childrenContainers!: QueryList<ElementRef<HTMLDivElement>>;
@@ -23,11 +27,6 @@ export class RoutesComponent {
 
   trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-  constructor(
-    public readonly routesService: RoutesService,
-    protected renderer: Renderer2,
-  ) {}
-
   isDropdown(node: TreeNode<ABP.Route>) {
     return !node?.isLeaf || this.routesService.hasChildren(node.name);
   }