角度构建中的 AOT 模式添加 `fr.` 或 `en.` 作为 transloco 中翻译键的前缀答案

【问题标题】：AOT mode in angular builds add `fr.` or `en.` as prefix of translation keys in transloco角度构建中的 AOT 模式添加 `fr.` 或 `en.` 作为 transloco 中翻译键的前缀
【发布时间】：2020-02-20 16:24:59
【问题描述】：

我有简单的翻译键，例如 login-page.login。

在 AOT 中构建时，无法正确显示翻译，而是显示键 fr.login-page.login。我没有找到为什么 AOT 会添加 lang 前缀。

显然，在 JIT 中，一切都运行良好。在两种模式（AOT 和 JIT）下，我都可以看到正在加载的翻译文件仅供参考，我每个组件都有一个翻译文件，每个文件的范围都在组件提供程序中。这是我的 transloco 配置：

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

编辑我在运行时检查过，我有： this.translocoService.availableLangs -> []

同时： this.translocoService.lang.getValue() -> "fr"

当我查看this.translocoService.translations 时，我已经完成了所有“fr”翻译。

最后，如果我尝试this.translocoService.translate('login-page.login')，它会记录为错误Missing translation for 'fr.login-page.login'。

编辑当我在 JIT 中启动项目时，translocoService.config 会返回我设置的配置。但是当我打开 AOT 时 translocoService.config 只是充满了默认配置所有项目配置都消失了......

【问题讨论】：

availableLangs 为空太奇怪了，我不知道为什么...

标签： angular translation aot transloco

【解决方案1】：

将 Transloco 从 2.12.0 更新到 2.13.3 并将 provideTranslocoConfig 替换为 translocoConfig，对我有用。

我的配置灵感来自于带有 transloco 示意图的新空白项目构建：

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

【讨论】：