AOT mode in angular builds add `fr.` or `en.` as prefix of translation keys in transloco

I've simple translation keys like login-page.login.

When building in AOT, the translation isn't displayed correctly and instead the key fr.login-page.login is displayed. I didn't found why AOT would add the lang prefix.

Obviously in JIT everything working beautifully. And in both mode (AOT and JIT) I can see translation filesbeing loaded FYI, I'v a translation file per components and each file is scoped in the component provider. Here is my transloco config:

provideTranslocoConfig({
    availableLangs: ['en', 'fr'],
    reRenderOnLangChange: true,
    defaultLang: 'fr',
    fallbackLang: 'en',
    missingHandler: {
      useFallbackTranslation: true,
      logMissingKey: false,
    },
    prodMode: environment.production,
    flatten: {
      aot: environment.production,
    },
  }),

EDIT I checked at runtime, I've: this.translocoService.availableLangs -> []

While: this.translocoService.lang.getValue() -> "fr"

When I check this.translocoService.translations, I've all my "fr" translation.

Lastly, if I try this.translocoService.translate('login-page.login'), it's logging as error Missing translation for 'fr.login-page.login'.

EDIT When I start the project in JIT the translocoService.config give back the config I set. But when I turn on the AOT the translocoService.config is just full of default configs all project config disappeared...

Solution

Updating Transloco from 2.12.0 to 2.13.3 and replacing provideTranslocoConfig by translocoConfig, worked for me.

I inspired my config from the new blank project build with the transloco schematics:

import { Injectable, NgModule } from '@angular/core';
import {
  Translation,
  TRANSLOCO_CONFIG,
  TRANSLOCO_LOADER,
  translocoConfig,
  TranslocoLoader,
  TranslocoModule,
} from '@ngneat/transloco';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { TranslocoMessageFormatModule } from '@ngneat/transloco-messageformat';
import { TranslocoLocaleModule } from '@ngneat/transloco-locale';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`assets/i18n/${lang}.json`);
  }
}

@NgModule({
  imports: [
    TranslocoModule,
    TranslocoMessageFormatModule.init(),
    TranslocoLocaleModule.init({
      langToLocaleMapping: {
        en: 'en-US',
        fr: 'fr-FR',
      },
    }),
  ],
  exports: [TranslocoModule, TranslocoMessageFormatModule, TranslocoLocaleModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'fr'],
        reRenderOnLangChange: true,
        defaultLang: 'fr',
        fallbackLang: 'en',
        missingHandler: {
          useFallbackTranslation: true,
          logMissingKey: false,
        },
        prodMode: environment.production,
        flatten: {
          aot: environment.production,
        },
      }),
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {}