fix: migrate ngx-translate to v17

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>

Author: valeriocomo

package-lock.json

@@ -75,8 +75,8 @@
     "@angular/platform-browser": "^21.0.4",
     "@angular/platform-browser-dynamic": "^21.0.4",
     "@angular/router": "^21.0.4",
-    "@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",
     "@standard-schema/spec": "^1.0.0",
     "@types/video.js": "^7.3.58",
     "@types/youtube": "^0.1.0",

package.json

@@ -57,8 +57,8 @@
     "@angular/core": "^21.0.4",
     "@angular/platform-browser": "^21.0.4",
     "@angular/router": "^21.0.4",
-    "@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",
     "bootstrap-italia": "^2.16.2"
   },
   "sideEffects": false,

projects/design-angular-kit/package.json

@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
-import { map, Observable, startWith } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { map, Observable, startWith } from 'rxjs';
 import { AvailableLanguage } from '../../../interfaces/utils';
-import { AsyncPipe } from '@angular/common';
 import { ItDropdownModule } from '../../core/dropdown/dropdown.module';
 
 @Component({
@@ -31,7 +31,7 @@ export class ItLanguageSwitcherComponent implements OnInit {
     const translateService = this.translateService;
 
     this.currentLang$ = this.translateService.onLangChange.pipe(
-      startWith({ lang: translateService.currentLang }),
+      startWith({ lang: translateService.getCurrentLang() }),
       map(event => this.availableLanguages?.find(l => l.code === event.lang))
     );
   }

projects/design-angular-kit/src/lib/components/utils/language-switcher/language-switcher.component.ts

@@ -18,7 +18,7 @@ export class ItDateAgoPipe extends TranslatePipe implements PipeTransform {
    * @example 2 hours ago
    * @param value the Date or date string
    */
-  override transform(value: string | Date): string {
+  override transform(value: string | Date | null | undefined): string {
     if (!value) {
       return '';
     }

projects/design-angular-kit/src/lib/pipes/date-ago.pipe.ts

@@ -34,9 +34,9 @@ export class ItDurationPipe extends TranslatePipe implements PipeTransform {
    * @param value the number
    * @param type the number expressed type
    */
-  override transform(value: string | number | undefined, type: ItDurationPipeType): string {
+  override transform(value: string | number | undefined | null, type: ItDurationPipeType): string {
     let valueAdjust = Number(value);
-    if (isNaN(valueAdjust)) {
+    if (isNaN(valueAdjust) || value === null) {
       return '';
     }
 

projects/design-angular-kit/src/lib/pipes/duration.pipe.ts

@@ -1,15 +1,8 @@
-import { HttpClient, provideHttpClient } from '@angular/common/http';
-import {
-  EnvironmentProviders,
-  importProvidersFrom,
-  makeEnvironmentProviders,
-  Provider,
-  provideAppInitializer,
-  inject,
-} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { EnvironmentProviders, inject, makeEnvironmentProviders, provideAppInitializer, Provider } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { provideTranslateService, TranslateService } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
 import { loadFonts } from 'bootstrap-italia';
 import { DesignAngularKitConfig, IT_ASSET_BASE_PATH } from './interfaces/design-angular-kit-config';
 
@@ -52,17 +45,24 @@ export function provideDesignAngularKit(config?: DesignAngularKitConfig): Enviro
   const langPrefix = `${assetBasePath}/i18n/`;
   const langSuffix = `.json`; // TODO: add ?v${version} to prevent cache loading on version change
   providers.push(
-    importProvidersFrom(
-      TranslateModule.forRoot({
-        loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
-          provide: TranslateLoader,
-          useFactory: (http: HttpClient) => new TranslateHttpLoader(http, langPrefix, langSuffix),
-          deps: [HttpClient],
-        },
-        defaultLanguage: 'it',
-        useDefaultLang: true,
-      })
-    )
+    // Design Angular Kit < 21
+    // ngx-translate <= 16
+    // importProvidersFrom(
+    //   TranslateModule.forRoot({
+    //     loader: config?.translateLoader?.(langPrefix, langSuffix) ?? {
+    //       provide: TranslateLoader,
+    //       useFactory: (http: HttpClient) => new TranslateHttpLoader(http, langPrefix, langSuffix),
+    //       deps: [HttpClient],
+    //     },
+    //     fallbackLang: 'it'
+    //   })
+    // )
+    // Design Angular Kit  >= 21
+    // ngx-translate >= 17
+    provideTranslateService({
+      loader: provideTranslateHttpLoader({ prefix: langPrefix, suffix: langSuffix }),
+      fallbackLang: 'it',
+    })
   );
 
   // Add provider to initialize library default languages