translations are not displayed with angular v18

[maxime-aubry]

Hello.

I failed to display translations with Angular v18.

Here is the config file :

import { APP_INITIALIZER, LOCALE_ID, Provider } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { defaultInterpolationFormat, I18NEXT_SERVICE, I18NextLoadResult, I18NextModule, I18NextTitle, ITranslationService } from "angular-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpBackend from "i18next-http-backend";

export const initializeI18n = async (i18next: ITranslationService): Promise<() => Promise<I18NextLoadResult>> => {    
    return () => {
      const promise: Promise<I18NextLoadResult> = i18next
        .use(LanguageDetector)
        .use(HttpBackend)
        .init({
          debug: false,
          fallbackLng: "en",
          supportedLngs: ["en", "es"],
          ns: ["translation"],
          defaultNS: "translation",
          backend: {
            loadPath: "/assets/locales/{{lng}}.i18n.json",
          },
          interpolation: {
            format: I18NextModule.interpolationFormat(defaultInterpolationFormat)
          },
          detection: {
            order: ["cookie"],
            lookupCookie: "lang",
            caches: ["cookie"]
          }
        });
      return promise;
    };
};

export const I18N_PROVIDERS: Provider[] = [
    {
      provide: APP_INITIALIZER,
      deps: [I18NEXT_SERVICE],
      multi: true,
      useFactory: initializeI18n,
    },
    {
      provide: Title,
      useClass: I18NextTitle
    },
    {
      provide: LOCALE_ID,
      deps: [I18NEXT_SERVICE],
      useFactory: (i18next: ITranslationService) => {
        return i18next.language;
      }
    },
];

Here is my module :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ImgClassStepperComponent } from '@image/components/img-class-stepper/img-class-stepper.component';
import { ImageRoutingModule } from '@image/image-routing.module';
import { I18NextModule } from 'angular-i18next';
import { I18N_PROVIDERS } from 'src/app/i18n';
import { StepperModule } from '../common/stepper/stepper.module';
import { LayoutComponent } from './layout/layout.component';

@NgModule({
  declarations: [LayoutComponent],
  imports: [
    CommonModule,
    ImageRoutingModule,
    ImgClassStepperComponent,
    RouterModule,
    StepperModule.forRoot(),
    I18NextModule.forRoot(),
  ],
  providers: [
      I18N_PROVIDERS,
  ]
})
export class ImageModule {}

And here is my component :

@Component({
    selector: 'app-layout',
    templateUrl: './layout.component.html',
    styleUrl: './layout.component.scss',
})
export class LayoutComponent implements OnInit {
    constructor (
        @Inject(I18NEXT_SERVICE) private i18NextService: ITranslationService,
    ) {
    }

    public ngOnInit(): void {
        const steps: Step[] = [
            new Step(0, this.i18NextService.t('imageStepper.imageChoice'), 'image/image-choice'),
            new Step(1, this.i18NextService.t('imageStepper.inference'), 'image/classification'),
            new Step(2, this.i18NextService.t('imageStepper.explainability'), ''),
            new Step(3, this.i18NextService.t('imageStepper.metrics')),
        ];
    }
}

I have no error, but none translations are loaded.

[Romanchuk]

Hello, demo app in this repository runs by angular 18 and there were no changes in setup inbetween v17 and v18.
You did something wrong. For me it is strange that you provide root level setup in ImageModule. Take a look at a demo app more closelly.
You must see loaded json files in a network tab, also you must see what i18next writes to console. Also i suggest to turn on debug to true