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”.
let trans = this.translocoService.getTranslation(...);
this.translocoService.setTranslation(trans, `${alias}/${activeLang}`);
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.
// 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
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): T
I 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).
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 !
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",
Root Module@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?)
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.
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!
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 !