From 56964f5862dc0c4bf9e56c59ea382fe466f2b81c Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 11:19:01 +0300
Subject: [PATCH 1/3] Replace LazyLocalizationPipe with AsyncLocalizationPipe

Updated the routes component to use AsyncLocalizationPipe instead of LazyLocalizationPipe for route name localization. Adjusted template bindings to use the new pipe, improving consistency and potentially performance.
---
 .../components/routes/routes.component.html   | 103 ++++++------------
 .../lib/components/routes/routes.component.ts |   4 +-
 2 files changed, 38 insertions(+), 69 deletions(-)

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 9f4fdd900d2..a7061ff83a6 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,109 +1,78 @@
 <ul class="navbar-nav">
   @for (route of routesService.visible$ | async; track $index) {
-    <ng-container
-      [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
-      [ngTemplateOutletContext]="{ $implicit: route }"
-    />
+  <ng-container [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
+    [ngTemplateOutletContext]="{ $implicit: route }" />
   }
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
       <a class="nav-link" [routerLink]="[route.path]">
         @if (route.iconClass) {
-          <i [ngClass]="route.iconClass"></i>
+        <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpLazyLocalization | async }}
+        {{ route.name | abpAsyncLocalization }}
       </a>
     </li>
   </ng-template>
 
   <ng-template #dropdownLink let-route>
     @if (route.children?.length) {
-      <li
-        class="nav-item dropdown"
-        display="static"
-        *abpPermission="route.requiredPolicy"
-        (click)="
+    <li class="nav-item dropdown" display="static" *abpPermission="route.requiredPolicy" (click)="
           rootDropdownExpand[route.name]
             ? (rootDropdownExpand[route.name] = false)
             : (rootDropdownExpand[route.name] = true)
-        "
-      >
-        <a
-          class="nav-link dropdown-toggle"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
-          href="javascript:void(0)"
-        >
-          @if (route.iconClass) {
-            <i [ngClass]="route.iconClass"></i>
-          }
-          {{ route.name | abpLazyLocalization | async }}
-        </a>
-        <div
-          #routeContainer
-          class="dropdown-menu border-0 shadow-sm"
-          (click)="$event.preventDefault(); $event.stopPropagation()"
-          [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
-        >
-          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
-        </div>
-      </li>
+        ">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+        href="javascript:void(0)">
+        @if (route.iconClass) {
+        <i [ngClass]="route.iconClass"></i>
+        }
+        {{ route.name | abpAsyncLocalization }}
+      </a>
+      <div #routeContainer class="dropdown-menu border-0 shadow-sm"
+        (click)="$event.preventDefault(); $event.stopPropagation()"
+        [class.d-block]="smallScreen && rootDropdownExpand[route.name]">
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
+      </div>
+    </li>
     }
   </ng-template>
 
   <ng-template #forTemplate let-route>
     @for (child of route.children; track $index) {
-      <ng-template
-        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
-        [ngTemplateOutletContext]="{ $implicit: child }"
-      />
+    <ng-template [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
+      [ngTemplateOutletContext]="{ $implicit: child }" />
     }
   </ng-template>
 
   <ng-template #defaultChild let-child>
     @if (child.path) {
-      <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-        <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
-          @if (child.iconClass) {
-            <i [ngClass]="child.iconClass"></i>
-          }
-          {{ child.name | abpLocalization }}</a
-        >
-      </div>
+    <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
+      <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
+        @if (child.iconClass) {
+        <i [ngClass]="child.iconClass"></i>
+        }
+        {{ child.name | abpLocalization }}</a>
+    </div>
     }
   </ng-template>
 
   <ng-template #dropdownChild let-child>
-    <div
-      class="dropdown-submenu"
-      ngbDropdown
-      #dropdownSubmenu="ngbDropdown"
-      placement="right-top"
-      [autoClose]="true"
-      *abpPermission="child.requiredPolicy"
-    >
+    <div class="dropdown-submenu" ngbDropdown #dropdownSubmenu="ngbDropdown" placement="right-top" [autoClose]="true"
+      *abpPermission="child.requiredPolicy">
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
-        <a
-          abpEllipsis="210px"
-          [abpEllipsisEnabled]="!smallScreen"
-          role="button"
-          class="btn d-block text-start dropdown-toggle"
-        >
+        <a abpEllipsis="210px" [abpEllipsisEnabled]="!smallScreen" role="button"
+          class="btn d-block text-start dropdown-toggle">
           @if (child.iconClass) {
-            <i [ngClass]="child.iconClass"></i>
+          <i [ngClass]="child.iconClass"></i>
           }
           {{ child.name | abpLocalization }}
         </a>
       </div>
-      <div
-        #childrenContainer
-        class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
-        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
-      >
+      <div #childrenContainer class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
+        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()">
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </div>
     </div>
   </ng-template>
-</ul>
+</ul>
\ No newline at end of file
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 5bc56ee765a..27463ea497f 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,6 +1,6 @@
 import {
   ABP,
-  LazyLocalizationPipe,
+  AsyncLocalizationPipe,
   LocalizationPipe,
   PermissionDirective,
   RoutesService,
@@ -30,7 +30,7 @@ import { EllipsisDirective } from '@abp/ng.theme.shared';
     AsyncPipe,
     RouterLink,
     NgbDropdownModule,
-    LazyLocalizationPipe,
+    AsyncLocalizationPipe,
     PermissionDirective,
     EllipsisDirective,
     LocalizationPipe,

From d0953601dd045ce36e15e9c834ad68f4146b1973 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Thu, 8 Jan 2026 17:45:16 +0300
Subject: [PATCH 2/3] Add async pipe to abpAsyncLocalization in routes

Appends the async pipe to the abpAsyncLocalization usage in routes.component.html to ensure localized route names are properly resolved from observables.
---
 .../src/lib/components/routes/routes.component.html           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 a7061ff83a6..9ec84892097 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
@@ -10,7 +10,7 @@
         @if (route.iconClass) {
         <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpAsyncLocalization }}
+        {{ route.name | abpAsyncLocalization | async}}
       </a>
     </li>
   </ng-template>
@@ -27,7 +27,7 @@
         @if (route.iconClass) {
         <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpAsyncLocalization }}
+        {{ route.name | abpAsyncLocalization | async }}
       </a>
       <div #routeContainer class="dropdown-menu border-0 shadow-sm"
         (click)="$event.preventDefault(); $event.stopPropagation()"

From 6329f4c81300f4c9f1b39797c5d26b4dc3e5f46d Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Fri, 9 Jan 2026 14:40:58 +0300
Subject: [PATCH 3/3] update: auto-save arrangements

---
 .../components/routes/routes.component.html   | 103 ++++++++++++------
 1 file changed, 67 insertions(+), 36 deletions(-)

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 9ec84892097..28e408655d2 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,78 +1,109 @@
 <ul class="navbar-nav">
   @for (route of routesService.visible$ | async; track $index) {
-  <ng-container [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
-    [ngTemplateOutletContext]="{ $implicit: route }" />
+    <ng-container
+      [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
+      [ngTemplateOutletContext]="{ $implicit: route }"
+    />
   }
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
       <a class="nav-link" [routerLink]="[route.path]">
         @if (route.iconClass) {
-        <i [ngClass]="route.iconClass"></i>
+          <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpAsyncLocalization | async}}
+        {{ route.name | abpAsyncLocalization | async }}
       </a>
     </li>
   </ng-template>
 
   <ng-template #dropdownLink let-route>
     @if (route.children?.length) {
-    <li class="nav-item dropdown" display="static" *abpPermission="route.requiredPolicy" (click)="
+      <li
+        class="nav-item dropdown"
+        display="static"
+        *abpPermission="route.requiredPolicy"
+        (click)="
           rootDropdownExpand[route.name]
             ? (rootDropdownExpand[route.name] = false)
             : (rootDropdownExpand[route.name] = true)
-        ">
-      <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-        href="javascript:void(0)">
-        @if (route.iconClass) {
-        <i [ngClass]="route.iconClass"></i>
-        }
-        {{ route.name | abpAsyncLocalization | async }}
-      </a>
-      <div #routeContainer class="dropdown-menu border-0 shadow-sm"
-        (click)="$event.preventDefault(); $event.stopPropagation()"
-        [class.d-block]="smallScreen && rootDropdownExpand[route.name]">
-        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
-      </div>
-    </li>
+        "
+      >
+        <a
+          class="nav-link dropdown-toggle"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          href="javascript:void(0)"
+        >
+          @if (route.iconClass) {
+            <i [ngClass]="route.iconClass"></i>
+          }
+          {{ route.name | abpAsyncLocalization | async }}
+        </a>
+        <div
+          #routeContainer
+          class="dropdown-menu border-0 shadow-sm"
+          (click)="$event.preventDefault(); $event.stopPropagation()"
+          [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
+        >
+          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
+        </div>
+      </li>
     }
   </ng-template>
 
   <ng-template #forTemplate let-route>
     @for (child of route.children; track $index) {
-    <ng-template [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
-      [ngTemplateOutletContext]="{ $implicit: child }" />
+      <ng-template
+        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
+        [ngTemplateOutletContext]="{ $implicit: child }"
+      />
     }
   </ng-template>
 
   <ng-template #defaultChild let-child>
     @if (child.path) {
-    <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-      <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
-        @if (child.iconClass) {
-        <i [ngClass]="child.iconClass"></i>
-        }
-        {{ child.name | abpLocalization }}</a>
-    </div>
+      <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
+        <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
+          @if (child.iconClass) {
+            <i [ngClass]="child.iconClass"></i>
+          }
+          {{ child.name | abpLocalization }}</a
+        >
+      </div>
     }
   </ng-template>
 
   <ng-template #dropdownChild let-child>
-    <div class="dropdown-submenu" ngbDropdown #dropdownSubmenu="ngbDropdown" placement="right-top" [autoClose]="true"
-      *abpPermission="child.requiredPolicy">
+    <div
+      class="dropdown-submenu"
+      ngbDropdown
+      #dropdownSubmenu="ngbDropdown"
+      placement="right-top"
+      [autoClose]="true"
+      *abpPermission="child.requiredPolicy"
+    >
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
-        <a abpEllipsis="210px" [abpEllipsisEnabled]="!smallScreen" role="button"
-          class="btn d-block text-start dropdown-toggle">
+        <a
+          abpEllipsis="210px"
+          [abpEllipsisEnabled]="!smallScreen"
+          role="button"
+          class="btn d-block text-start dropdown-toggle"
+        >
           @if (child.iconClass) {
-          <i [ngClass]="child.iconClass"></i>
+            <i [ngClass]="child.iconClass"></i>
           }
           {{ child.name | abpLocalization }}
         </a>
       </div>
-      <div #childrenContainer class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
-        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()">
+      <div
+        #childrenContainer
+        class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
+        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
+      >
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </div>
     </div>
   </ng-template>
-</ul>
\ No newline at end of file
+</ul>