[Angular] bump ngx-translate to 17.0.0 (#30224)

Author: qmonmert

generators/angular/resources/package.json

@@ -5,8 +5,8 @@
     "@fortawesome/fontawesome-svg-core": "7.0.0",
     "@fortawesome/free-solid-svg-icons": "7.0.0",
     "@ng-bootstrap/ng-bootstrap": "19.0.1",
-    "@ngx-translate/core": "16.0.4",
-    "@ngx-translate/http-loader": "16.0.1",
+    "@ngx-translate/core": "17.0.0",
+    "@ngx-translate/http-loader": "17.0.0",
     "@popperjs/core": "2.11.8",
     "@stomp/rx-stomp": "2.0.1",
     "bootstrap": "5.3.7",

generators/angular/templates/package.json.ejs

@@ -41,6 +41,7 @@
     "@ng-bootstrap/ng-bootstrap": "<%= nodeDependencies['@ng-bootstrap/ng-bootstrap'] %>",
 <%_ if (enableTranslation) { _%>
     "@ngx-translate/core": "<%= nodeDependencies['@ngx-translate/core'] %>",
+    "@ngx-translate/http-loader": "<%= nodeDependencies['@ngx-translate/http-loader'] %>",
 <%_ } _%>
     "bootstrap": "<%= nodeDependencies.bootstrap %>",
     <%_ if (!clientThemeNone) { _%>

generators/angular/templates/src/main/webapp/app/account/register/register.component.spec.ts.ejs

@@ -70,7 +70,7 @@ describe('RegisterComponent', () => {
     fakeAsync((service: RegisterService<% if (enableTranslation) { %>, mockTranslateService: TranslateService<% } %>) => {
       jest.spyOn(service, 'save').mockReturnValue(of({}));
 <%_ if (enableTranslation) { _%>
-      mockTranslateService.currentLang = '<%= nativeLanguage %>';
+      jest.spyOn(mockTranslateService, 'getCurrentLang').mockReturnValue('<%= nativeLanguage %>');
 <%_ } _%>
       comp.registerForm.patchValue({
         password: 'password',

generators/angular/templates/src/main/webapp/app/account/register/register.component.ts.ejs

@@ -86,7 +86,7 @@ export default class RegisterComponent implements AfterViewInit {
     } else {
       const { login, email } = this.registerForm.getRawValue();
       this.registerService
-        .save({ login, email, password, langKey: <% if (enableTranslation) { %>this.translateService.currentLang<% } else { %>'<%= nativeLanguage %>'<% } %> })
+        .save({ login, email, password, langKey: <% if (enableTranslation) { %>this.translateService.getCurrentLang()<% } else { %>'<%= nativeLanguage %>'<% } %> })
         .subscribe({ next: () => (this.success.set(true)), error: response => this.processError(response) });
     }
   }

generators/angular/templates/src/main/webapp/app/account/settings/settings.component.ts.ejs

@@ -86,7 +86,7 @@ export default class SettingsComponent implements OnInit {
       this.accountService.authenticate(account);
 
 <%_ if (enableTranslation) { _%>
-      if (account.langKey !== this.translateService.currentLang) {
+      if (account.langKey !== this.translateService.getCurrentLang()) {
         this.translateService.use(account.langKey);
       }
 <%_ } _%>

generators/angular/templates/src/main/webapp/app/config/translation.config.ts.ejs

@@ -20,9 +20,6 @@ import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateLo
 <%_ if (clientBundlerExperimentalEsbuild) { _%>
 import { loadLocale } from 'i18n';
 import { Observable, from } from 'rxjs';
-<%_ } else { _%>
-import { HttpClient } from '@angular/common/http';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 <%_ } _%>
 
 export const translationNotFoundMessage = 'translation-not-found';
@@ -42,10 +39,6 @@ export function translatePartialLoader(): TranslateLoader {
     },
   };
 }
-<%_ } else { _%>
-export function translatePartialLoader(http: HttpClient): TranslateLoader {
-  return new TranslateHttpLoader(http, 'i18n/', `.json?_=${I18N_HASH}`);
-}
 <%_ } _%>
 
 export function missingTranslationHandler(): MissingTranslationHandler {

generators/angular/templates/src/main/webapp/app/core/util/alert.service.spec.ts.ejs

@@ -43,7 +43,7 @@ describe('Alert service test', () => {
       });
 <%_ if (enableTranslation) { _%>
       const translateService = TestBed.inject(TranslateService);
-      translateService.setDefaultLang('en');
+      translateService.setFallbackLang('en');
 <%_ } _%>
       jest.useFakeTimers();
       extAlerts = [];

generators/angular/templates/src/main/webapp/app/layouts/main/main.component.spec.ts.ejs

@@ -23,7 +23,7 @@ import { Router, TitleStrategy } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { DOCUMENT } from '@angular/common';
 import { Component, NgZone } from '@angular/core';
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 <%_ if (enableTranslation) { _%>
 import { InterpolatableTranslationObject, TranslateModule, TranslateService, LangChangeEvent } from '@ngx-translate/core';
 <%_ } _%>
@@ -42,6 +42,7 @@ describe('MainComponent', () => {
   let titleService: Title;
 <%_ if (enableTranslation) { _%>
   let translateService: TranslateService;
+  let langChangeSubject: Subject<LangChangeEvent>;
   <%_ if (enableI18nRTL) { _%>
   let findLanguageFromKeyPipe: FindLanguageFromKeyPipe;
   <%_ } _%>
@@ -93,6 +94,13 @@ describe('MainComponent', () => {
     ngZone = TestBed.inject(NgZone);
     router = TestBed.inject(Router);
     document = TestBed.inject(DOCUMENT);
+    <%_ if (enableTranslation) { _%>
+    langChangeSubject = new Subject<LangChangeEvent>();
+    Object.defineProperty(translateService, 'onLangChange', {
+      value: langChangeSubject,
+      writable: true,
+    });
+    <%_ } _%>
   });
 
   describe('page title', () => {
@@ -107,7 +115,7 @@ describe('MainComponent', () => {
       routerState.snapshot.root = { data: {} };
 <%_ if (enableTranslation) { _%>
       jest.spyOn(translateService, 'get').mockImplementation((key: string | string[]) => of(`${key as string} translated`));
-      translateService.currentLang = '<%= nativeLanguage %>';
+      jest.spyOn(translateService, 'getCurrentLang').mockReturnValue('<%= nativeLanguage %>');
 <%_ } _%>
       jest.spyOn(titleService, 'setTitle');
       comp.ngOnInit();
@@ -176,7 +184,7 @@ describe('MainComponent', () => {
     describe('language change', () => {
       it('should set page title to default title if pageTitle is missing on routes', () => {
         // WHEN
-        translateService.onLangChange.emit(langChangeEvent);
+        langChangeSubject.next(langChangeEvent);
 
         // THEN
         expect(document.title).toBe(`${defaultPageTitle} translated`);
@@ -198,7 +206,7 @@ describe('MainComponent', () => {
         document.title = 'other title';
 
         // WHEN
-        translateService.onLangChange.emit(langChangeEvent);
+        langChangeSubject.next(langChangeEvent);
 
         // THEN
         expect(document.title).toBe(`${parentRoutePageTitle} translated`);
@@ -225,7 +233,7 @@ describe('MainComponent', () => {
         document.title = 'other title';
 
         // WHEN
-        translateService.onLangChange.emit(langChangeEvent);
+        langChangeSubject.next(langChangeEvent);
 
         // THEN
         expect(document.title).toBe(`${childRoutePageTitle} translated`);
@@ -252,7 +260,7 @@ describe('MainComponent', () => {
         document.title = 'other title';
 
         // WHEN
-        translateService.onLangChange.emit(langChangeEvent);
+        langChangeSubject.next(langChangeEvent);
 
         // THEN
         expect(document.title).toBe(`${parentRoutePageTitle} translated`);
@@ -271,7 +279,7 @@ describe('MainComponent', () => {
   <%_ if (enableI18nRTL) { _%>
       findLanguageFromKeyPipe.isRTL = jest.fn(() => false);
   <%_ } _%>
-      translateService.onLangChange.emit({ lang: 'lang1', translations: {} as InterpolatableTranslationObject });
+      langChangeSubject.next({ lang: 'lang1', translations: {} as InterpolatableTranslationObject });
 
       // THEN
       expect(document.querySelector('html')?.getAttribute('lang')).toEqual('lang1');
@@ -283,7 +291,7 @@ describe('MainComponent', () => {
   <%_ if (enableI18nRTL) { _%>
       findLanguageFromKeyPipe.isRTL = jest.fn(() => true);
   <%_ } _%>
-      translateService.onLangChange.emit({ lang: 'lang2', translations: {} as InterpolatableTranslationObject });
+      langChangeSubject.next({ lang: 'lang2', translations: {} as InterpolatableTranslationObject });
 
       // THEN
       expect(document.querySelector('html')?.getAttribute('lang')).toEqual('lang2');

generators/angular/templates/src/main/webapp/app/layouts/main/main.component.ts.ejs

@@ -78,7 +78,7 @@ export default class MainComponent implements OnInit {
 
 <%_ if (enableI18nRTL) { _%>
   private updatePageDirection(): void {
-    this.renderer.setAttribute(document.querySelector('html'), 'dir', this.findLanguageFromKeyPipe.isRTL(this.translateService.currentLang) ? 'rtl' : 'ltr');
+    this.renderer.setAttribute(document.querySelector('html'), 'dir', this.findLanguageFromKeyPipe.isRTL(this.translateService.getCurrentLang()) ? 'rtl' : 'ltr');
   }
 <%_ } _%>
 }

generators/angular/templates/src/main/webapp/app/layouts/navbar/active-menu.directive.ts.ejs

@@ -34,7 +34,7 @@ export default class ActiveMenuDirective implements OnInit {
       this.updateActiveFlag(event.lang);
     });
 
-    this.updateActiveFlag(this.translateService.currentLang);
+    this.updateActiveFlag(this.translateService.getCurrentLang());
   }
 
   updateActiveFlag(selectedLanguage: string): void {