I have a problem with scoped translations in the component itself. Here's my code:
module.ts
@NgModule({
providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'articles' }],
[...]
component.ts
[...]
constructor(translocoService: TranslocoService) {
this.sortItems = [
// TODO Translation does not seem to work with the scope here
{ id: 'number', label: translocoService.translate('articles.article.number') },
{ id: 'name', label: translocoService.translate('articles.article.name') },
{ id: 'updated_at', label: translocoService.translate('articles.article.updated-at') },
];
this.sortBy = this.sortItems[0];
}
[...]
component.html
[...]
<div class="prose">
<h2 class="headline">{{ 'articles.headline' | transloco }}</h2>
<!-- No Problems with the scope there-->
<h3 class="headline">{{ 'articles.article.number' | transloco }}</h3>
</div>
<wb-twc-dropdown-select [items]="sortItems" (itemClick)="onSorterItemClick($event)" [active]="sortBy"></wb-twc-dropdown-select>
[...]
No problem in the components template using the directives or pipes, but the service does not seems to be scoped in the component itself. Any obvious mistake by me?
{
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