translate our keys. Eveything is automated with export & import scripts and it works well apart from one issue:
For some keys we need to provide some description/meaning.
As mentioned here: https://ngneat.github.io/transloco/docs/tools/comments we can add this information in our json.
The problem is that lokalise doesn't understand this syntax & it just creates a separate key for each comment.
Do you have any suggestions how we can solve this?
Seems like lokalise.com expects something like this: https://docs.lokalise.com/en/articles/3229161-structured-json
Hi,
Newcomer here. I integrated Transloco into my application, and it seems like a really powerful package.
I have added translations, and now use it in of my pages. The application bootstraps, and when I go to the page, the translation is visible.
So everything seems to be working fine - except when I refresh the page I use the translation in, they do not show up anymore.
(basically reloading the application and going directly to that specific page)
Seems like the translation have not been loaded yet? Am I missing something?
getActiveLang() from within that specific component does return the correct “language string”.
2 replies
https://ngneat.github.io/transloco/docs/language-api#load
let trans = this.translocoService.getTranslation(...);
this.translocoService.setTranslation(trans, `${alias}/${activeLang}`);
2 replies
Hi, I met a wierd problem for loading translation files.
The translation files are loaded only after authentication. For example, the contents inside my app work well since it requires user to log in. If the user logs out, the content in home page can't display. I found that the translation were not loaded since there is no http calls for translation in "Network" tab in Chrome Dev Tools.
I have no ideas why there is a relationship between i18n and auth.
1 reply
// home module
@NgModule({
declarations: [HomeComponent],
imports: [CommonModule, HomeRoutingModule, ComponentsModule, NgxsModule.forFeature([HomeState]), TranslocoModule],
providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'shared', multi: true }],
})
export class HomeModule {}
// component
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less'],
})
export class HomeComponent {
constructor(private store: Store, private i18n: TranslocoService) {
console.log(this.i18n.translate<string>('shared.not_found.component.title'));
}
}{ path: '', loadChildren: () => import('./modules/home/home.module').then((m) => m.HomeModule) }
TranslocoRootModule is imported correctly, and I am using the preloadUser strategy, just as the documentation says
TranslocoRootModule was generated by the cli
1 reply
Did the signature of the translate function change? I see it is now generically typed, which is breaking my code because it is now unknown by default instead of string. Shouldn't the type have a default of string? as in translate<T = string>??
export declare function translate<T>(key: TranslateParams, params?: HashMap, lang?: string): TI see TranslocoService.translate is <T = string> but not the standalone translate function. I'll submit an issue, and PR unless I hear otherwise.
Update: Added issue #544 - ngneat/transloco#544
I am using the structural directive to do a nested translation, but in my unit test I am only seeing the first value. Any ideas why the values aren't inserted?
translation file:
"cardholder.expenseGroup.create.form.name": "Name",
"cardholder.expenseGroup.create.form.maxlength": "{field} must be {maxLength} characters or less",template:
<ng-container *transloco="let t">
{{ t('cardholder.expenseGroup.create.form.maxlength', { field: t('cardholder.expenseGroup.create.form.name'), maxLength: nameMaxLength }) }}
</ng-container>test output:
Expected '{field} must be {maxLength} characters or less' to be 'Name must be 100 characters or less'.
ng g @ngneat/transloco:scope tool-bar in order to add a new scope to my app. However am getting this errorSchematic input does not validate against the Schema: {"name":"toolbar","project":"vex","langs":["en","ar","fr","pt"],"translateType":"JSON","routing":false,"routingScope":"Child","flat":false,"commonModule":true,"lintFix":false}
Errors:
Data path "" must NOT have additional properties(inlineLoader).What am I doing wrong?
Hello, is there a clean method to detect from the structural directive (transloco) when the content within the transloco has rendered (language has been loaded)?
I need to know when the content within transloco is available to start a flow which uses @ViewChild.
I have tried the setter, but the setter does not work when the @ViewChild is nested inside another structural directive (e.g ngIf).
I need to know when can i start a flow to ,, unlock " the content from the inner structural directive (ngIf) so i have acces to the nested @ViewChild. The starting point of my flow depends on the transloco loading finishing point.
<ng-container *transloco="let t; read: 'adminPage'">
<p *ngIf="condition">
<button #btn>Test</button>
</p>
</ng-container>
For example here, i cannot do setter on ViewChild(btn) as i need to know the ending point of *transloco to start the flow of making condition=true.
Please let me know if you can understand me, thank you !
I have a question about Transloco.
My system has different customers, workshop or e.g. sales. I would like to load a general translation in forRoot but additionally overwrite certain values according to the customer. e.g. a heading etc. but would like to use the same key in templates. Have any of you done this before? or have you got any ideas for this?
Hi There... Is it possible to access message format features using the translation API's
Here is how my json file looks like
"informationText": "payment/request {{templateRule}} available",
"templateRule": "{infoCount, plural, =0 {no templates} one {1 template} other {# templates}}"On my TS, i'm trying to do this
const footerLabel = this.translocoService.translate(
footerLabel,
{
infoCount: footerCount
},
this.localeScope
);The output i'm seeing is
payment/request available
"@ngneat/transloco": "^4.0.0",
"@ngneat/transloco-messageformat": "^4.0.0",@NgModule({
exports: [TranslocoModule],
imports: [TranslocoMessageFormatModule.forRoot()],
providers: [
{
provide: TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs: ['en-US', 'es-ES'],
defaultLang: 'en-US',
fallbackLang: 'en-US',
reRenderOnLangChange: true,
prodMode: environment.production
})
},
{provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader}
]
})
Hi, I have strange behaviour
There is a module that declares Parent and several Child components
Parent has scope provider with alias
Parent draws table and Child components are cells in it
Child1 uses injected transloco service translate method with params like key, {}, providedScope
And Child2 uses attr directive in template, but not interested in Parent scope
The situation:
While Parent renders table's first row Child1 and Child2 gets correct translation
While other rows only Child2 get correct translation
I debuged it and found out:
At first row Child1 translate method trying to resolveLangAndScope. Don't find value in scopeMapping and make toCamelCase(scope)
It's okay. Merged translation has such key.
Next to Child2. Attr directive uses another method of resolving scope - ScopeResolver. Through it's resolve method sets value into scopeMapping
Any thoughts?)
1 reply
- "Your age and address do not match" where age and address are a list of variables.
- "Your sex, age and address do not match".
I'm currently trying to do it with a TranspilerFunction, joining the variables with "," and "and", but I can't make it work.
Any tips?
Is there a way to configure the keys manager to not automatically prefix translation path?
My i18n files are not in the src/lib but rather in the project root. the translation path config parameter feels like gets automatically prefixed so I end up with.
Translations path provided doesn't exists!
ex: projects/mylib/assets/i18n
not: projects/mylib/src/lib/assets/i18n
If I run directly in the projects/mylib folder, it defaults prefixing to /src - again incorrect.
1 reply
Hello, my team develops an npm library with Angular UI components, each exported in its own module.
Right now our text is hardcoded. How can we provide translations to our components with a help of Transloco? I was not able to find appropriate instruction on how to use it for libraries.
And how other applications (who use our library) can control langulage changes for our components?
Thanks ahead!
1 reply
Hello everyone, I have a question about the translations. When I try to log the actual translations, I see that some of them are duplicated under the default prefix.
Do you know what it means and why sometimes you can have one of your key that appears in this default scope but not under its own full name ?
Thank you for your answers !
- first, I want to use typescript files for languages and not json (en.ts instead of en.json)
- then I want to create my own loader that will not use http requests to load the language files during translation but these typescript files must be launched at the compilation of the angular project.
Could someone help me please?