@NgModule({
exports: [ TranslocoModule ],
providers: [
{
provide: TRANSLOCO_LOADING_TEMPLATE,
useValue: '<h1>@@@@@</h1>'
},
{
provide: TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs: environment.i18n.availableLanguages,
defaultLang: environment.i18n.defaultLanguageKey,
reRenderOnLangChange: true,
flatten: {
aot: isProduction(),
},
prodMode: isProduction(),
})
},
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
]
})
export class TranslocoRootModule {}
Hello everyone! Faced the following problem:
I am developing a library, inside which I use transloco.
Nx monorepo, but the library is also published to npm.
an error appears when building the library with transloco >=v3.0.0, on 2.23.5 build was successed.
I just import TranslocoModule and got error.
Compiling with Angular in legacy View Engine compilation mode.
An unhandled exception occurred: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
at parseUnknownTag (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35831:78)
at parseTag (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35679:35)
at /Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35476:44
at Object.scanRange (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:11692:26)
at parseJSDocCommentWorker (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35447:32)
at /Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35400:91
at doInsideOfContext (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:30166:30)
at Object.parseJSDocComment (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:35400:31)
at /Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:29985:123
at Object.mapDefined (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:806:30)
at addJSDocComment (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:29985:28)
at withJSDoc (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:29980:31)
at parsePropertyDeclaration (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:34670:20)
at parsePropertyOrMethodDeclaration (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:34681:20)
at parseClassElement (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:34867:28)
at parseListElement (/Users/a.bikbaev/WebstormProjects/twork-service/node_modules/typescript/lib/typescript.js:30876:20)ng serve with transloco >=v3.0.0 is greate, but library build failed
ng version:
@angular-devkit/architect 0.1202.5
@angular-devkit/build-angular 12.2.5
@angular-devkit/core 12.2.5
@angular-devkit/schematics 12.2.5
@angular/cdk 9.1.3
@schematics/angular 9.1.12
ng-packagr 12.2.1
rxjs 6.5.5
typescript 4.3.5
webpack 5.52.1who faced similar error?
1 reply
the official docs show the example for routing like /todos , we have a todos page and we want to create separate translation files for this page
what if...
I have a toto detail page /todos/detail ,
how should I setup my TRANSLOCO_SCOPE provider? and how should I put my i18n json files?
2 replies
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?)