Angular - Hybrid localization support

npm/ng-packs/packages/core/src/lib/models/common.ts

@@ -16,6 +16,26 @@ export namespace ABP {
     othersGroup?: string;
     dynamicLayouts?: Map<string, string>;
     disableProjectNameInTitle?: boolean;
+    uiLocalization?: UILocalizationOptions;
+  }
+
+  export interface UILocalizationOptions {
+    /**
+     * Enable UI localization feature
+     * When enabled, localization files are automatically loaded based on selected language
+     * Files should be located at: {basePath}/{culture}.json
+     * Example: /assets/localization/en.json
+     * JSON format: { "ResourceName": { "Key": "Value" } }
+     * Merges with backend localizations (UI > Backend priority)
+     */
+    enabled?: boolean;
+    /**
+     * Base path for localization JSON files
+     * Default: '/assets/localization'
+     * Files should be located at: {basePath}/{culture}.json
+     * Example: /assets/localization/en.json
+     */
+    basePath?: string;
   }
 
   export interface Child {

npm/ng-packs/packages/core/src/lib/providers/core-module-config.provider.ts

@@ -23,7 +23,12 @@ import { RoutesHandler } from '../handlers';
 import { ABP, SortableItem } from '../models';
 import { AuthErrorFilterService } from '../abstracts';
 import { DEFAULT_DYNAMIC_LAYOUTS } from '../constants';
-import { LocalizationService, LocalStorageListenerService, AbpTitleStrategy } from '../services';
+import {
+  LocalizationService,
+  LocalStorageListenerService,
+  AbpTitleStrategy,
+  UILocalizationService,
+} from '../services';
 import { DefaultQueueManager, getInitialData } from '../utils';
 import { CookieLanguageProvider, IncludeLocalizationResourcesProvider, LocaleProvider } from './';
 import { timezoneInterceptor, transferStateInterceptor } from '../interceptors';
@@ -113,6 +118,11 @@ export function provideAbpCore(...features: CoreFeature<CoreFeatureKind>[]) {
       inject(LocalizationService);
       inject(LocalStorageListenerService);
       inject(RoutesHandler);
+      // Initialize UILocalizationService if UI-only mode is enabled
+      const options = inject(CORE_OPTIONS);
+      if (options?.uiLocalization?.enabled) {
+        inject(UILocalizationService);
+      }
       await getInitialData();
     }),
     LocaleProvider,

npm/ng-packs/packages/core/src/lib/services/index.ts

@@ -8,6 +8,7 @@ export * from './http-wait.service';
 export * from './lazy-load.service';
 export * from './list.service';
 export * from './localization.service';
+export * from './ui-localization.service';
 export * from './multi-tenancy.service';
 export * from './permission.service';
 export * from './replaceable-components.service';

npm/ng-packs/packages/core/src/lib/services/localization.service.ts

@@ -60,6 +60,8 @@ export class LocalizationService {
   private initLocalizationValues() {
     localizations$.subscribe(val => this.addLocalization(val));
 
+    // Backend-based localization loading (always enabled)
+    // UI localizations are merged via addLocalization() (UI > Backend priority)
     const legacyResources$ = this.configState.getDeep$('localization.values') as Observable<
       Record<string, Record<string, string>>
     >;
@@ -90,7 +92,8 @@ export class LocalizationService {
               const resourceName = entry[0];
               const remoteTexts = entry[1];
               let resource = local?.get(resourceName) || {};
-              resource = { ...resource, ...remoteTexts };
+              // UI > Backend priority: UI localization'lar backend'i override eder
+              resource = { ...remoteTexts, ...resource };
 
               local?.set(resourceName, resource);
             });

npm/ng-packs/packages/core/src/lib/services/ui-localization.service.ts

@@ -0,0 +1,120 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { catchError, shareReplay, tap } from 'rxjs/operators';
+import { ABP } from '../models/common';
+import { LocalizationService } from './localization.service';
+import { SessionStateService } from './session-state.service';
+import { CORE_OPTIONS } from '../tokens/options.token';
+
+export interface LocalizationResource {
+  [resourceName: string]: Record<string, string>;
+}
+
+/**
+ * Service for managing UI localizations in ABP Angular applications.
+ * Automatically loads localization files based on selected language
+ * Merges with backend localizations (UI > Backend priority)
+ */
+@Injectable({ providedIn: 'root' })
+export class UILocalizationService {
+  private http = inject(HttpClient);
+  private localizationService = inject(LocalizationService);
+  private sessionState = inject(SessionStateService);
+  private options = inject(CORE_OPTIONS);
+
+  private loadedLocalizations$ = new BehaviorSubject<Record<string, LocalizationResource>>({});
+
+  private currentLanguage$ = this.sessionState.getLanguage$();
+
+  constructor() {
+    const uiLocalization = this.options.uiLocalization;
+    if (uiLocalization?.enabled) {
+      this.subscribeToLanguageChanges();
+    }
+  }
+
+  private subscribeToLanguageChanges() {
+    this.currentLanguage$
+      .pipe(
+        distinctUntilChanged(),
+        switchMap(culture => this.loadLocalizationFile(culture)),
+        shareReplay(1),
+      )
+      .subscribe();
+  }
+
+  private loadLocalizationFile(culture: string) {
+    const config = this.options.uiLocalization;
+    if (!config?.enabled) return of(null);
+
+    const basePath = config.basePath || '/assets/localization';
+    const url = `${basePath}/${culture}.json`;
+
+    return this.http.get<LocalizationResource>(url).pipe(
+      catchError(() => {
+        // If file not found or error occurs, return null
+        return of(null);
+      }),
+      tap(data => {
+        if (data) {
+          this.processLocalizationData(culture, data);
+        }
+      }),
+    );
+  }
+
+  private processLocalizationData(culture: string, data: LocalizationResource) {
+    const abpFormat: ABP.Localization[] = [
+      {
+        culture,
+        resources: Object.entries(data).map(([resourceName, texts]) => ({
+          resourceName,
+          texts,
+        })),
+      },
+    ];
+    this.localizationService.addLocalization(abpFormat);
+
+    const current = this.loadedLocalizations$.value;
+    current[culture] = data;
+    this.loadedLocalizations$.next(current);
+  }
+
+  addAngularLocalizeLocalization(
+    culture: string,
+    resourceName: string,
+    translations: Record<string, string>,
+  ): void {
+    const abpFormat: ABP.Localization[] = [
+      {
+        culture,
+        resources: [
+          {
+            resourceName,
+            texts: translations,
+          },
+        ],
+      },
+    ];
+    this.localizationService.addLocalization(abpFormat);
+
+    const current = this.loadedLocalizations$.value;
+    if (!current[culture]) {
+      current[culture] = {};
+    }
+    if (!current[culture][resourceName]) {
+      current[culture][resourceName] = {};
+    }
+    current[culture][resourceName] = {
+      ...current[culture][resourceName],
+      ...translations,
+    };
+    this.loadedLocalizations$.next(current);
+  }
+
+  getLoadedLocalizations(culture?: string): LocalizationResource {
+    const lang = culture || this.sessionState.getLanguage();
+    return this.loadedLocalizations$.value[lang] || {};
+  }
+}