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

Question

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...

It's so strange to have availableLangs empty, I've no idea why... — Alexandre SIRKO, Feb 20 '20 at 17:11

score 1 · Accepted Answer · answered Feb 24 '20 at 17:31

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 {}

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

1 Answers1