chore(deps): update dependency @ngx-translate/core to v17

Author: renovate[bot]

package-lock.json

@@ -91,7 +91,7 @@
     "@angular/router": "20.0.6",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
-    "@ngx-translate/core": "16.0.4",
+    "@ngx-translate/core": "^17.0.0",
     "@siemens/ngx-datatable": "^24.0.0",
     "echarts": "5.6.0",
     "flag-icons": "7.5.0",

package.json

@@ -60,7 +60,7 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.translate.setDefaultLang('en');
+    this.translate.setFallbackLang('en');
     this.translate.use(this.translate.getBrowserLang() ?? 'en');
   }
 

projects/dashboards-demo/src/app/app.component.ts

@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "20",
     "@angular/core": "20",
-    "@ngx-translate/core": "15 - 16",
+    "@ngx-translate/core": "15 - 17",
     "@siemens/element-ng": "47.8.0",
     "@siemens/element-theme": "47.8.0",
     "gridstack": "^11.1.0"

projects/dashboards-ng/package.json

@@ -5,7 +5,7 @@
 import { TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SiTranslateNgxTModule } from '@siemens/element-translate-ng/ngx-translate';
-import { Observable, of } from 'rxjs';
+import { Observable, of, take } from 'rxjs';
 
 import { SiLocaleStore } from './si-locale-store';
 import { SI_LOCALE_CONFIG, SiLocaleConfig, SiLocaleService } from './si-locale.service';
@@ -232,7 +232,7 @@ describe('SiLocaleService', () => {
           fail();
         }
       });
-      translate.onLangChange.subscribe(() => {
+      translate.onLangChange.pipe(take(1)).subscribe(() => {
         translate.use('de');
       });
     });

projects/element-ng/localization/si-locale.service.spec.ts

@@ -132,7 +132,10 @@ export class SiLocaleService {
     // If a user changes the language on the translate service directly,
     // we synchronize the change again.
     this.translate.translationChange.subscribe(() => {
-      this.locale = this.translate.currentLanguage;
+      const current = this.translate.currentLanguage;
+      if (current) {
+        this.locale = current;
+      }
     });
 
     if (this.config.fallbackEnabled) {

projects/element-ng/localization/si-locale.service.ts

@@ -340,7 +340,7 @@ export class SiPhoneNumberInputComponent
   private getCountryName(countryCode: string): string {
     // This auto translates the given country name to the selected locale language
     return (
-      new Intl.DisplayNames([this.translate.currentLanguage], { type: 'region' }).of(
+      new Intl.DisplayNames([this.translate.currentLanguage ?? 'en'], { type: 'region' }).of(
         countryCode.toUpperCase()
       ) ?? ''
     );

projects/element-ng/phone-number/si-phone-number-input.component.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Injectable, Injector } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateParser, TranslateService } from '@ngx-translate/core';
 import {
   SiTranslateService,
   SiTranslateServiceBuilder
@@ -24,10 +24,11 @@ export class SiTranslateNgxTServiceBuilder extends SiTranslateServiceBuilder {
   buildService(injector: Injector): SiTranslateService {
     // Get instance of NGX Translate via injector instance of the current scope (see isolated mode)
     const ngxTranslateService = injector.get(TranslateService);
+    const parser = injector.get(TranslateParser);
 
     let ngxTServiceWrapper = this.serviceCache.get(ngxTranslateService);
     if (!ngxTServiceWrapper) {
-      ngxTServiceWrapper = new SiTranslateNgxTService(ngxTranslateService);
+      ngxTServiceWrapper = new SiTranslateNgxTService(ngxTranslateService, parser);
       this.serviceCache.set(ngxTranslateService, ngxTServiceWrapper);
     }
 

projects/element-translate-ng/ngx-translate/si-translate-ngxt.service-builder.ts

@@ -4,14 +4,19 @@
  */
 import { Injectable } from '@angular/core';
 import {
-  MissingTranslationHandler,
   MissingTranslationHandlerParams,
-  TranslateService
+  TranslateParser,
+  TranslateService,
+  Translation
 } from '@ngx-translate/core';
 import { SiTranslateService, TranslationResult } from '@siemens/element-translate-ng/translate';
 import { merge, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+interface MissingTranslationHandler {
+  handle: (params: MissingTranslationHandlerParams) => Translation | Observable<Translation>;
+}
+
 /**
  * {@link SiTranslateService} wrapper around ngx-translate
  *
@@ -20,16 +25,19 @@ import { map } from 'rxjs/operators';
 @Injectable()
 export class SiTranslateNgxTService extends SiTranslateService {
   private ngxTranslateService: TranslateService;
+  private parser: TranslateParser;
   private defaultTranslations: Record<string, string> = {};
   private originalMissingHandler: MissingTranslationHandler;
 
   // eslint-disable-next-line @angular-eslint/prefer-inject
-  constructor(ngxTranslateService: TranslateService) {
+  constructor(ngxTranslateService: TranslateService, parser: TranslateParser) {
     super();
     this.ngxTranslateService = ngxTranslateService;
-    this.originalMissingHandler = ngxTranslateService.missingTranslationHandler;
-    ngxTranslateService.missingTranslationHandler = {
-      handle: params => this.handleMissingTranslation(params)
+    this.parser = parser;
+    this.originalMissingHandler = (ngxTranslateService as any)
+      .missingTranslationHandler as MissingTranslationHandler;
+    (ngxTranslateService as any).missingTranslationHandler = {
+      handle: (params: MissingTranslationHandlerParams) => this.handleMissingTranslation(params)
     };
 
     this.translationChange$ = merge(
@@ -38,11 +46,12 @@ export class SiTranslateNgxTService extends SiTranslateService {
     ).pipe(map(() => {}));
   }
 
-  override get currentLanguage(): string {
+  override get currentLanguage(): string | undefined {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     return this.ngxTranslateService.currentLang;
   }
 
-  override get availableLanguages(): string[] {
+  override get availableLanguages(): readonly string[] {
     return this.ngxTranslateService.getLangs();
   }
 
@@ -56,11 +65,13 @@ export class SiTranslateNgxTService extends SiTranslateService {
   }
 
   override getDefaultLanguage(): string {
-    return this.ngxTranslateService.getDefaultLang();
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    return this.ngxTranslateService.getDefaultLang() ?? 'en';
   }
 
   override setDefaultLanguage(lang: string): void {
     this.setDocumentLanguage(lang);
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     this.ngxTranslateService.setDefaultLang(lang);
   }
 
@@ -99,11 +110,14 @@ export class SiTranslateNgxTService extends SiTranslateService {
   }
 
   private handleMissingTranslation(params: MissingTranslationHandlerParams): string {
-    return (
-      params.translateService.parser.interpolate(
-        this.defaultTranslations[params.key],
-        params.interpolateParams
-      ) ?? this.originalMissingHandler.handle(params)
+    const result =
+      this.parser.interpolate(this.defaultTranslations[params.key], params.interpolateParams) ??
+      this.originalMissingHandler.handle(params);
+    if (typeof result === 'string') {
+      return result;
+    }
+    throw new Error(
+      `Invalid result type of missing translation handler: ${typeof result} ${result}`
     );
   }
 }

projects/element-translate-ng/ngx-translate/si-translate-ngxt.service.ts

@@ -23,7 +23,7 @@
   "peerDependencies": {
     "@angular/common": "20",
     "@angular/core": "20",
-    "@ngx-translate/core": "15 - 16"
+    "@ngx-translate/core": "15 - 17"
   },
   "peerDependenciesMeta": {
     "@ngx-translate/core": {