From 51c85c98672c981fc25a370496f5ec1a320424c5 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Fri, 11 Apr 2025 14:06:41 +0300
Subject: [PATCH 1/2] add: `LazyTranslatePipe` for theme basic

---
 .../theme-basic/src/lib/pipes/index.ts        |  1 +
 .../src/lib/pipes/lazy-translate.pipe.ts      | 20 +++++++++++++++++++
 .../theme-basic/src/lib/theme-basic.module.ts |  2 ++
 .../packages/theme-basic/src/public-api.ts    |  1 +
 4 files changed, 24 insertions(+)
 create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts
 create mode 100644 npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts
new file mode 100644
index 0000000000..0bde64d742
--- /dev/null
+++ b/npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts
@@ -0,0 +1 @@
+export * from './lazy-translate.pipe';
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts b/npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts
new file mode 100644
index 0000000000..d7b36a0c32
--- /dev/null
+++ b/npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts
@@ -0,0 +1,20 @@
+import { LocalizationService, ConfigStateService } from '@abp/ng.core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { Observable, filter, take, switchMap, shareReplay } from 'rxjs';
+
+@Pipe({
+  name: 'abpLazyTranslate',
+})
+export class LazyTranslatePipe implements PipeTransform {
+  private localizationService = inject(LocalizationService);
+  private configStateService = inject(ConfigStateService);
+
+  transform(key: string): Observable<string> {
+    return this.configStateService.getAll$().pipe(
+      filter(config => !!config.localization),
+      take(1),
+      switchMap(() => this.localizationService.get(key)),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+}
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
index d959509dfd..d68d112ac5 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
@@ -16,6 +16,7 @@ import { PageAlertContainerComponent } from './components/page-alert-container/p
 import { RoutesComponent } from './components/routes/routes.component';
 import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
 import { provideThemeBasicConfig } from './providers';
+import { LazyTranslatePipe } from './pipes';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -48,6 +49,7 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     NgbCollapseModule,
     NgbDropdownModule,
     NgxValidateCoreModule,
+    LazyTranslatePipe,
   ],
 })
 export class BaseThemeBasicModule {}
diff --git a/npm/ng-packs/packages/theme-basic/src/public-api.ts b/npm/ng-packs/packages/theme-basic/src/public-api.ts
index 5c607ca06d..ec57cc892e 100644
--- a/npm/ng-packs/packages/theme-basic/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-basic/src/public-api.ts
@@ -6,6 +6,7 @@ export * from './lib/components';
 export * from './lib/enums';
 export * from './lib/handlers';
 export * from './lib/models';
+export * from './lib/pipes';
 export * from './lib/providers';
 export * from './lib/theme-basic.module';
 export * from './lib/tokens';

From 3065b5d2da2cf6daf811f75690d6f4b31ddf0aa6 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Fri, 11 Apr 2025 14:07:59 +0300
Subject: [PATCH 2/2] update: refactor routes component

---
 .../lib/components/routes/routes.component.html   | 15 ++++++---------
 .../src/lib/components/routes/routes.component.ts |  9 ++++-----
 2 files changed, 10 insertions(+), 14 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 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);
   }