transloco: Language fallback doesn't work properly

• As a fix for the current situation the getNextLangs should be called only once on the first language failure.

  • Totally agree. This is what I’m trying to do in the fix PR. The getNextLangs() is only called at the first time of loading translation failed. And the langs in NextLangs in tried one by one, until loading a translation successfully. In the meanwhile, getNextLangs() must not be evaluated again.

• In the future I think that getNextLangs should be replaced with getNextLang, so the strategy will decide individually for each failed lang what should be loaded next.

  • I really like this idea. From a API consumer perspective, provide a single fallback language according to the failed one is enough. It’s simpler and easier to understand. From transloco perspective, it’s easier to implement, I think.

@shaharkazaz

@shaharkazaz Thanks very much for replying.

This is my custom TranslocoFallbackStrategy:

export class LanguageFallbackStrategy implements TranslocoFallbackStrategy {
  static readonly defaultLang = 'en';

  /**
   * @example
   * 
   * failedLang: 'zh-Hans-CN'
   * Returns: ['zh-Hans', 'zh', 'en']
   *
   * lang: 'fr-CA'
   * Returns: ['fr', 'en']
   */
  getNextLangs(failedLang: string): string[] {
    const langs = this.getAllLangs(failedLang);
    return failedLang === langs[0] ? langs.slice(1) : langs;
  }

  /**
   * @example
   * 
   * lang: 'zh-Hans-CN'
   * Returns: ['zh-Hans-CN', 'zh-Hans', 'zh', 'en']
   *
   * lang: 'fr-CA'
   * Returns: ['fr-CA', 'fr', 'en']
   */
  getAllLangs(lang: string): string[] {
    if (this.isLangValid(lang)) {
      const langs: string[] = [];

      // For example, `zh-Hans-CN` may next check for
      // `zh-Hans`, then if `zh-Hans` is not found, `zh`.
      const splitted = lang.split('-');
      splitted.reduce((acc, cur) => {
        const lang = acc ? `${acc}-${cur}` : `${cur}`;
        langs.unshift(lang);
        return lang;
      }, '');

      // append the default language to the end
      const lastLang = langs[langs.length - 1];
      if (lastLang !== LanguageFallbackStrategy.defaultLang) {
        langs.push(LanguageFallbackStrategy.defaultLang);
      }

      return langs;
    } else {
      return [LanguageFallbackStrategy.defaultLang];
    }
  }
}

And add it to root providers:

export const translocoFallbackStrategy = {
  provide: TRANSLOCO_FALLBACK_STRATEGY,
  useClass: LanguageFallbackStrategy,
};

@NgModule({
  imports: [TranslocoModule],
  exports: [TranslocoModule],
})
export class I18nModule {
  static forRoot(): ModuleWithProviders<I18nModule> {
    return {
      ngModule: I18nModule,
      providers: [
        acceptLanguageInterceptor,
        selectBrowserLanguageProvider,
        translocoConfig,
        translocoFallbackStrategy,
        translocoLoader,
      ],
    };
  }
}

I thought this is all I need to code to make the language fallback work. However, this is not working as I expected. 😄

@zhongsp hey! Really busy times for me, I’ll try to get to it this week, but no promises 🙏

Once I’ll get some time I’ll address it!