angular 中的 AOT 模式构建添加 `fr.` 或 `en.` 作为 transloco 中翻译键的前缀
AOT mode in angular builds add `fr.` or `en.` as prefix of translation keys in transloco
我有像 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 {}
我有像 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 {}