Transloco 无法在我的 Angular 12 Prod 版本中工作，但它可以在我的 DEV 版本中工作。我可能会错过什么？

Question

当我使用

npm start

在本地运行 Angular 12 应用程序时，Transloco 翻译工作正常。

但是，在

ng build --configuration production

之后，当我使用

http-server dist/my-project

运行我的应用程序时，翻译不起作用 - 我看到了原始值。

这是我的transloco-root.module.ts：

import { HttpClient } from "@angular/common/http";
import {
  Translation,
  TRANSLOCO_CONFIG,
  TRANSLOCO_LOADER,
  translocoConfig,
  TranslocoLoader,
  TranslocoModule
} from "@ngneat/transloco";
import { Injectable, NgModule } from "@angular/core";
import { environment } from "../../environments/environment";

@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({
  exports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ["hin", "eng", "tel"],
        defaultLang: "eng",
        reRenderOnLangChange: true,
        prodMode: environment.production,
        fallbackLang: "hin",
        failedRetries: 1,
        missingHandler: {
          allowEmpty: true,
          useFallbackTranslation: true
        },
        flatten: {
          aot: environment.production
        }
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})
export class TranslocoRootModule {
}

这是我的transloco.config.js：

module.exports = {
  rootTranslationsPath: 'src/assets/i18n/',
  langs: ['hin', 'eng', 'tel'],
  keysManager: {}
};

Answer 1

奇怪......但这对我有用：

从提供商中删除条目可以使翻译在产品模式下工作。

        flatten: {
          aot: environment.production,
        },

有什么想法吗？

Answer 2

启用后，

flatten.aot

配置允许翻译文件扁平化、删除译者注释并缩小 JSON 文件。

确保设置优化工具，以便您的翻译能够在生产模式下工作。