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