我有简单的翻译键,例如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只是充满了默认配置,所有项目配置都消失了...
将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 {}