{
provide: TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs: ['en', 'de'],
fallbackLang: "en",
missingHandler: {
useFallbackTranslation: true
},
defaultLang: 'en',
failedRetries: 2,
// Remove this option if your application doesn't support changing language in runtime.
reRenderOnLangChange: true,
prodMode: environment.production,
})
},
detectChanges
.it('should get overridden language translation with lang', async function() {
expect('.i18n').toHaveText('This is english.');
await new Promise(resolve => {
translocoService.events$.pipe(
filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
).subscribe(t => resolve());
translocoService.setActiveLang('es');
}).then(() => spectator.detectChanges());
expect('.i18n').toHaveText('Esto es español.');
});
@avifox spectator is not necessary, but it really makes everything easier. My examples are below.
For missing keys, I agree with @shaharkazaz , if you want to check for missing keys, just run transloco-keys-manager find
and look for the missing and unused keys. If you wanted it automated, maybe there is a way to parse the output and make it a pass/fail step in your build process.
i pulled out my setLanguage promise into a function that i can call:
/** setting the language does not happen immediately. It must first load,
* then change detection must fire.
* This method will set the lang, and wait for it to load and detect changes. */
async function setLang(lang: string) {
await new Promise(resolve => {
translocoService.events$.pipe(
filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
).subscribe(t => resolve());
translocoService.setActiveLang(lang);
}).then(() => spectator.detectChanges());
}
here is my beforeEach:
beforeEach(() => {
// tests were written for the case that spanish is the default language
TranslocoConfigProvider.useValue.defaultLang = 'es';
spectator = createSpectator();
translocoService = spectator.inject(TranslocoService);
// set lang here so we can make sure it is loaded before running tests
setLang('es');
});
make sure to also use the TranslocoTestingModule
, here's what I used, borrowed from Transloco:
export const languageMap = {
en,
es,
'i18nTest/en': admin,
'i18nTest/es': adminSpanish,
'lazyPage/en': lazy,
'lazyPage/es': lazySpanish,
'mf/en': transpilersMessageFormat,
'mf/es': transpilersMessageFormatSpanish
};
export function getTranslocoTestModule(config: Partial<TranslocoConfig> = {}) {
return TranslocoTestingModule.withLangs(
languageMap,
{
availableLangs: ['es', 'en'],
defaultLang: 'es',
fallbackLang: 'en',
...config
}
);
}
Hey everyone! Curious question about providing params to a json array with just the template.
For example, consider the following language file
{
"LISTS": [
"List Item 1 {{param}}",
"List Item 2",
"List Item 3 {{param}}"
]
}
Does anyone have a solution to provide the parameter while using the above in a *ngFor
?
Doing it like such does not work, which is expected:
<ul>
<li *ngFor="let item of ('LISTS' | transloco: { param: 'Hello World'})">item</li>
</ul>
I was able to achieve this by using selectTranslationObject
in the respected component file and change my json array to an object of objects but it would be pretty cool if I can accomplish this just in the template
Question on translocoDate
PIPE. How can I display day & month only? (E.g. Dec 12). In the documentation, the guide is limited.
* date | translocoDate: {} : en-US // 9/10/2019
* date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM
* date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time
* 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970
* '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019
@dalenguyen Transloco L10N uses the native Intl
, you can read more about date formatting here.
The following code should produce the output you want:
new Intl.DateTimeFormat('en-US', {month: 'short', day: 'numeric'}).format(Date.now())
This means that {month: 'short', day: 'numeric'}
is the config you are looking for :smile:
Hello. I'm trying to follow the example here https://ngneat.github.io/transloco/docs/inline-loaders
but I'm lacking clarity. I have the following JSON:
{
"generalSettings": {
"title": "General Settings",
"header": "Edit the configuration for your store.",
"clientInformation": {
"sectionLbl": "Client Information"
}
}
}
In my features module, I have:
imports: [
...
TranslocoModule
],
declarations: [
...all components
],
providers: [
{
provide: TRANSLOCO_SCOPE,
useValue: {
scope: 'shopSettings',
loader,
},
},
],
The template works well. I have the following:
<div *transloco="let t; read: 'shopSettings.generalSettings'">
<h2>{{ t('title') }}</h2>
{{ t('header') }}
</div>
However, in the component file, I can't seem to load the translation. Each of the following queries logs error:
constructor(
private translocoService: TranslocoService,
) {}
ngOnInit() {
let result = this.translocoService.translateObject('shopSettings.generalSettings.clientInformation');
result = this.translocoService.translateObject('generalSettings.clientInformation');
result = this.translocoService.translateObject('clientInformation');
}
// outputs:
// Missing translation for 'shopSettings.generalSettings.clientInformation'
// Missing translation for 'generalSettings.clientInformation'
// Missing translation for 'clientInformation'
What am I missing? Thanks!
translate
are synchronous and will only work if your translation is already loaded.selectTranslateObject
@shaharkazaz Thanks for the reply. I've tried selectTranslateObject as you suggested and I get the same error message. To be clear, the en.json file is in a directory within the feature module:
https://files.gitter.im/5d5555fcd73408ce4fc87fc0/qquh/image.png
and I have a loader function in the feature module:
export const loader = ['en', 'es'].reduce((acc, lang) => {
acc[lang] = () => import(`./_i18n/${lang}.json`);
return acc;
}, {});
The template markup sees the translations but I can't get it to show up in the component logic.