[ACS-11213] Upgrade ngx-translate to v17 (#11692)

lib/core/src/lib/core.module.ts

@@ -16,7 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { TranslateLoader, provideTranslateService } from '@ngx-translate/core';
+import { provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';
 import { ABOUT_DIRECTIVES } from './about/about.module';
 import { CARD_VIEW_DIRECTIVES } from './card-view/card-view.module';
 import { CONTEXT_MENU_DIRECTIVES } from './context-menu/context-menu.module';
@@ -38,7 +38,6 @@ import { CORE_DIRECTIVES } from './directives/directive.module';
 import { CORE_PIPES } from './pipes/pipe.module';
 import { TranslateLoaderService } from './translation/translate-loader.service';
 import { SEARCH_TEXT_INPUT_DIRECTIVES } from './search-text/search-text-input.module';
-import { HttpClient } from '@angular/common/http';
 import { AppConfigPipe } from './app-config';
 import { IconComponent } from './icon';
 import { DynamicChipListComponent } from './dynamic-chip-list';
@@ -123,12 +122,8 @@ export class CoreModule {
             ngModule: CoreModule,
             providers: [
                 provideTranslateService({
-                    loader: {
+                    loader: provideTranslateLoader(TranslateLoaderService),
-                        provide: TranslateLoader,
+                    fallbackLang: 'en'
-                        useClass: TranslateLoaderService,
-                        deps: [HttpClient]
-                    },
-                    defaultLanguage: 'en'
                 }),
                 provideAppConfig()
             ]

lib/core/src/lib/testing/noop-translate.module.ts

@@ -18,13 +18,13 @@
 import { EventEmitter, Injectable, NgModule } from '@angular/core';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideTranslateService, TranslateLoader } from '@ngx-translate/core';
+import { provideTranslateLoader, provideTranslateService, TranslateLoader, TranslationObject } from '@ngx-translate/core';
 import { TranslationService } from '../translation/translation.service';
 import { LangChangeEvent } from '../mock';
 import { Observable, of } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
-export class NoopTranslationService {
+export class NoopTranslationService implements TranslateLoader {
     defaultLang: string = 'en';
     userLang: string;
     customLoader: any;
@@ -47,6 +47,10 @@ export class NoopTranslationService {
     instant(key: string | Array<string>): string | any {
         return key;
     }
+
+    getTranslation(): Observable<TranslationObject> {
+        return of({});
+    }
 }
 
 @NgModule({
@@ -55,10 +59,7 @@ export class NoopTranslationService {
         provideHttpClientTesting(),
         { provide: TranslationService, useClass: NoopTranslationService },
         provideTranslateService({
-            loader: {
+            loader: provideTranslateLoader(NoopTranslationService)
-                provide: TranslateLoader,
-                useClass: NoopTranslationService
-            }
         })
     ]
 })

lib/core/src/lib/translation/provide-i18n.spec.ts

@@ -40,7 +40,7 @@ describe('provideI18N', () => {
 
         it('should set default language to "en" when not specified', () => {
             const translateService = TestBed.inject(TranslateService);
-            expect(translateService.defaultLang).toBe('en');
+            expect(translateService.getFallbackLang()).toBe('en');
         });
     });
 
@@ -53,7 +53,7 @@ describe('provideI18N', () => {
 
         it('should set custom default language', () => {
             const translateService = TestBed.inject(TranslateService);
-            expect(translateService.defaultLang).toBe('fr');
+            expect(translateService.getFallbackLang()).toBe('fr');
         });
     });
 
@@ -81,7 +81,7 @@ describe('provideI18N', () => {
             // Services should be properly configured
             expect(translateService).toBeDefined();
             expect(translationService).toBeDefined();
-            expect(translateService.defaultLang).toBe('en');
+            expect(translateService.getFallbackLang()).toBe('en');
         });
     });
 
@@ -153,7 +153,7 @@ describe('provideI18N', () => {
 
         it('should set translations for custom default language', () => {
             const translateService = TestBed.inject(TranslateService);
-            expect(translateService.defaultLang).toBe('fr');
+            expect(translateService.getFallbackLang()).toBe('fr');
             expect(translateService.instant('HELLO')).toBe('Bonjour!');
         });
     });
@@ -184,7 +184,7 @@ describe('provideI18N', () => {
             const translateService = TestBed.inject(TranslateService);
             const loader = translateService.currentLoader as TranslateLoaderService;
 
-            expect(translateService.defaultLang).toBe('en');
+            expect(translateService.getFallbackLang()).toBe('en');
             expect(loader).toBeDefined();
             expect(loader.providerRegistered).toBeDefined();
             expect(loader.providerRegistered('adf-core')).toBeTruthy();
@@ -211,7 +211,7 @@ describe('provideI18N', () => {
         it('should handle empty translations object', () => {
             const translateService = TestBed.inject(TranslateService);
             expect(translateService).toBeDefined();
-            expect(translateService.defaultLang).toBe('en');
+            expect(translateService.getFallbackLang()).toBe('en');
         });
     });
 });

lib/core/src/lib/translation/provide-i18n.ts

@@ -16,9 +16,8 @@
  */
 
 import { EnvironmentProviders, inject, provideAppInitializer, Provider } from '@angular/core';
-import { provideTranslateService, TranslateLoader, TranslateService } from '@ngx-translate/core';
+import { provideTranslateLoader, provideTranslateService, TranslateService } from '@ngx-translate/core';
 import { TranslateLoaderService } from './translate-loader.service';
-import { HttpClient } from '@angular/common/http';
 import { provideTranslations } from './translation.service';
 
 export interface ProvideI18NConfig {
@@ -54,12 +53,8 @@ export function provideI18N(config?: ProvideI18NConfig): (Provider | Environment
 
     const result: (Provider | EnvironmentProviders)[] = [
         provideTranslateService({
-            loader: {
+            loader: provideTranslateLoader(TranslateLoaderService),
-                provide: TranslateLoader,
+            fallbackLang: defaultLanguage
-                useExisting: TranslateLoaderService,
-                deps: [HttpClient]
-            },
-            defaultLanguage
         })
     ];
 

lib/core/src/lib/translation/translate-loader.spec.ts

@@ -18,8 +18,7 @@
 import { TestBed } from '@angular/core/testing';
 import { TranslateLoaderService } from './translate-loader.service';
 import { TranslationService } from './translation.service';
-import { provideTranslateService, TranslateLoader } from '@ngx-translate/core';
+import { provideTranslateLoader, provideTranslateService } from '@ngx-translate/core';
-import { HttpClient } from '@angular/common/http';
 
 describe('TranslateLoader', () => {
     let translationService: TranslationService;
@@ -29,12 +28,8 @@ describe('TranslateLoader', () => {
         TestBed.configureTestingModule({
             providers: [
                 provideTranslateService({
-                    loader: {
+                    loader: provideTranslateLoader(TranslateLoaderService),
-                        provide: TranslateLoader,
+                    fallbackLang: 'en'
-                        useClass: TranslateLoaderService,
-                        deps: [HttpClient]
-                    },
-                    defaultLanguage: 'en'
                 }),
                 TranslationService
             ]

lib/core/src/lib/translation/translation.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { TestBed } from '@angular/core/testing';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { provideTranslateLoader, provideTranslateService, TranslateLoader } from '@ngx-translate/core';
 import { TranslationService } from './translation.service';
 import { of } from 'rxjs';
 import { provideAppConfigTesting } from '../testing';
@@ -51,15 +51,13 @@ describe('TranslationService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            providers: [
-                TranslateModule.forRoot({
+                TranslationService,
-                    loader: {
+                provideAppConfigTesting(),
-                        provide: TranslateLoader,
+                provideTranslateService({
-                        useClass: FakeLoader
+                    loader: provideTranslateLoader(FakeLoader)
-                    }
                 })
-            ],
+            ]
-            providers: [TranslationService, provideAppConfigTesting()]
         });
 
         translationService = TestBed.inject(TranslationService);

lib/core/src/lib/translation/translation.service.ts

@@ -62,7 +62,7 @@ export class TranslationService {
         this.customLoader = this.translate.currentLoader as TranslateLoaderService;
 
         this.defaultLang = 'en';
-        this.translate.setDefaultLang(this.defaultLang);
+        this.translate.setFallbackLang(this.defaultLang);
         this.customLoader.setDefaultLang(this.defaultLang);
 
         if (this.providers && this.providers.length > 0) {
@@ -115,7 +115,7 @@ export class TranslationService {
      * @param fallback Language code to fall back to if the first one was unavailable
      */
     loadTranslation(lang: string, fallback?: string) {
-        this.translate.getTranslation(lang).subscribe(
+        this.translate.currentLoader.getTranslation(lang).subscribe(
             () => {
                 this.translate.use(lang);
                 this.onTranslationChanged(lang);
@@ -134,10 +134,8 @@ export class TranslationService {
      * @param lang The new language code
      */
     onTranslationChanged(lang: string): void {
-        this.translate.onTranslationChange.next({
+        const translations = this.customLoader.getFullTranslationJSON?.(lang) ?? {};
-            lang,
+        this.translate.setTranslation(lang, translations, true);
-            translations: this.customLoader.getFullTranslationJSON?.(lang) ?? {}
-        });
     }
 
     /**

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -45,7 +45,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDialogHarness } from '@angular/material/dialog/testing';
 import { By } from '@angular/platform-browser';
-import { TranslateLoader, TranslateService, provideTranslateService } from '@ngx-translate/core';
+import { TranslateLoader, TranslateService, provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';
 import { firstValueFrom, Observable, of, throwError } from 'rxjs';
 import {
     cloudFormMock,
@@ -1746,10 +1746,7 @@ describe('Multilingual Form', () => {
             imports: [NoopAuthModule],
             providers: [
                 provideTranslateService({
-                    loader: {
+                    loader: provideTranslateLoader(FakeLoader)
-                        provide: TranslateLoader,
-                        useClass: FakeLoader
-                    }
                 })
             ]
         });

package-lock.json

@@ -23,7 +23,7 @@
         "@apollo/client": "3.13.1",
         "@cspell/eslint-plugin": "9.4.0",
         "@mat-datetimepicker/core": "15.0.2",
-        "@ngx-translate/core": "^16.0.4",
+        "@ngx-translate/core": "^17.0.0",
         "angular-oauth2-oidc": "17.0.2",
         "angular-oauth2-oidc-jwks": "^17.0.2",
         "apollo-angular": "10.0.3",
@@ -8953,9 +8953,9 @@
       "license": "MIT"
     },
     "node_modules/@ngx-translate/core": {
-      "version": "16.0.4",
+      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-16.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
-      "integrity": "sha512-s8llTL2SJvROhqttxvEs7Cg+6qSf4kvZPFYO+cTOY1d8DWTjlutRkWAleZcPPoeX927Dm7ALfL07G7oYDJ7z6w==",
+      "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"

package.json

@@ -52,7 +52,7 @@
     "@apollo/client": "3.13.1",
     "@cspell/eslint-plugin": "9.4.0",
     "@mat-datetimepicker/core": "15.0.2",
-    "@ngx-translate/core": "^16.0.4",
+    "@ngx-translate/core": "^17.0.0",
     "angular-oauth2-oidc": "17.0.2",
     "angular-oauth2-oidc-jwks": "^17.0.2",
     "apollo-angular": "10.0.3",