Ultime release richiedono obbligatoriamente Angular 17?

[icolumbro-asf]

Stavo utilizzando con soddisfazione la realease 1.0.0-prerelease.1 del kit in un paio di mie applicazioni basate su Angular 16. Nell'attesa del rilascio della versione 1.0.0 stabile, attratto anche dai fix e dalle nuove features, ho provato ad aggiornare all'ultima prerelease.3 che però ho notato richiede Angular 17. Purtroppo aggiornando ad Angular 17 ho problemi con la libreria @ngx-translate e come ne implmento l'utilizzo nei miei moduli, chiedo: per le future release e quindi anche per la futura versione stabile sarà quindi necessaria la versione 17 di Angular? E, se sì: se posto dettagli mi aiutereste a capire il problema e trovare la possibile soluzione? Intando sono dovuto tornare alla prerelease.1...

[AntoninoBonanno]

Si certo, comunque ngx-translate è compatibile con Angular 17.

[icolumbro-asf]

In console vedo l'errore TypeError: translateService.currentLoader.initialize is not a function, questo è il codice interessato:

startup.module.ts

import {
  ICultureConfiguration,
  CULTURE_CONFIGURATION_TOKEN,
} from '../types/model';
import {
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from '@ngx-translate/core';
import { CultureService } from '../services/culture.service';
import { firstValueFrom } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { InMemoryTranslateHttpLoader } from '../services/in-memory-translate-loader';
import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
import { SpinnerService } from '../services/spinner.service';
import { tap } from 'rxjs/operators';
import { StorageService } from '../services/storage.service';
import { DialogService } from '../services/dialog.service';

export function httpLoaderFactory(
  http: HttpClient,
  cultureConfiguration: ICultureConfiguration
) {
  return new InMemoryTranslateHttpLoader(http, cultureConfiguration);
}

export const translateModule = TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: httpLoaderFactory,
    deps: [HttpClient, CULTURE_CONFIGURATION_TOKEN],
  },
});

@NgModule({
  declarations: [],
  imports: [translateModule],
  exports: [],
  providers: [CultureService, DialogService, SpinnerService, StorageService],
})
export class StartupModule {
  public static forRoot(
    cultureConfiguration: ICultureConfiguration
  ): ModuleWithProviders<StartupModule> {
    return {
      ngModule: StartupModule,
      providers: [
        {
          provide: CULTURE_CONFIGURATION_TOKEN,
          useValue: cultureConfiguration,
          multi: false,
        },
        {
          provide: APP_INITIALIZER,
          useFactory: languageLoader,
          deps: [TranslateService, CultureService],
          multi: true,
        },
      ],
    };
  }
}

export function languageLoader(
  translateService: TranslateService,
  cultureService: CultureService
) {
  return function () {
    return firstValueFrom(
      (<InMemoryTranslateHttpLoader>translateService.currentLoader)
        .initialize()
        .pipe(
          tap((t) => {
            cultureService.initialize();
          })
        )
    );
  };
}

in-memory-translate-loader.ts

import '../extensions-methods/array.extensions';
import '../extensions-methods/form.extensions';
import { all } from 'deepmerge';
import { HttpClient } from '@angular/common/http';
import { ICultureConfiguration } from '../types/model';
import { Injectable } from '@angular/core';
import { map, tap } from 'rxjs/operators';
import { Observable, forkJoin, of } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';

@Injectable()
export class InMemoryTranslateHttpLoader extends TranslateLoader {
  private _data: TranslationResult[] = [];

  constructor(
    private _httpClient: HttpClient,
    private _cultureConfiguration: ICultureConfiguration
  ) {
    super();
  }

  public initialize = (): Observable<TranslationResult[]> => {
    let httpCalls: Observable<any>[] = [];
    for (let i = 0; i < this._cultureConfiguration.resourcePaths.length; i++) {
      for (let x = 0; x < this._cultureConfiguration.cultureCodes.length; x++) {
        let url = this._cultureConfiguration.resourcePaths[i].replace(
          '{code}',
          this._cultureConfiguration.cultureCodes[x]
        );
        httpCalls.push(
          this._httpClient
            .get(url)
            .pipe(
              map(
                (result) =>
                  new TranslationResult(
                    this._cultureConfiguration.cultureCodes[x],
                    result
                  )
              )
            )
        );
      }
    }
    return forkJoin(httpCalls).pipe(
      tap((results: TranslationResult[]) => {
        this._data = results
          .groupBy((g) => g.cultureCode)
          .map((m) => {
            let innerResource = new TranslationResult(m.key, {});
            m.items.push(innerResource);
            let mergedItems = all(m.items.map((m) => m.data));
            return new TranslationResult(m.key, mergedItems);
          });
      })
    );
  };

  public getTranslation(lang: string): Observable<any> {
    let ret = this._data.find((f) => f.cultureCode == lang).data;
    return of(ret);
  }
}

export class TranslationResult {
  constructor(public cultureCode: string, public data: any) {}
}

in Angular 16 la funzione httpLoaderFactoryviene eseguita prima di languageLoader cosa che non avviene in Angular 17, cosa è cambiato in questa versione?

[AntoninoBonanno]

Nella nuova versione del design-angular-kit utilizziamo il TranslateModule.forRoot al caricamento del provider/modulo.

https://github.com/italia/design-angular-kit/blob/main/projects%2Fdesign-angular-kit%2Fsrc%2Flib%2Fprovide-design-angular-kit.ts#L46

Quindi dovresti passare il tuo loader nella configurazione iniziale del design-angular-kit

[astagi]

@icolumbro-asf è tutto risolto?

[icolumbro-asf]

Ho risolto in parte ma poi, avendo necessità di procedere col lavoro e lo sviluppo e avendo poco tempo, sono tornato alla versione prerelease.1 del kit in modo da poter utilizzare Angular 16. Appena avrò tempo, procederò col porting verso Angular 17 e le ultime versioni del kit sperando di riuscir a risolvere completamente il problema.

[astagi]

Ok! Grazie del riscontro @icolumbro-asf lunedì rilasceremo la versione 1.0.0 stabile su Angular 17 potrai ripartire da quella, salvo successive release con qualche bugfix.

[icolumbro-asf]

Ottimo, grazie a voi!