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.

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>

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,