Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Bojan Kogoj
    I thought I should just say, good job on the library. Together with transloco-persist-lang it's very simple to start new project.
    Kenny Picavet
    Hi, I have a question. We are migrating angular localization to transloco in our app as we speak. We have an integration with lokalise.com where translators will
    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


    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
    Is there any way to provide an "alias" when manually preloading translations with the translocoService.load() method?

    what happenend to

    In Version 3.X?


    Update: It got removed, now it's forRoot()

    translocoConfig: {...},

    @chrismarx answering my own question, there doesn't seem to be a way to do it through load, but after the translations are loaded, then you can do it manually with
    let trans = this.translocoService.getTranslation(...);
    this.translocoService.setTranslation(trans, `${alias}/${activeLang}`);
    Grigory Belousov
    Hello. I have an Angular Nx repo with several projects. One of the projects is translated using Transloco. It has main translation files lie in assets folder. I get translation using TranslocoHttpLoader. Also some libs have their own translation files. Is there a way to share main translation files (which are in assets folder) between other projects without copy-pasting them into assets folder of each project?
    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
    Does anyone know why the lazy load strategy is not working for me?
    // home module
      declarations: [HomeComponent],
      imports: [CommonModule, HomeRoutingModule, ComponentsModule, NgxsModule.forFeature([HomeState]), TranslocoModule],
      providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'shared', multi: true }],
    export class HomeModule {}
    // component
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.less'],
    export class HomeComponent {
      constructor(private store: Store, private i18n: TranslocoService) {
    { path: '', loadChildren: () => import('./modules/home/home.module').then((m) => m.HomeModule) }
    The TranslocoRootModule is imported correctly, and I am using the preloadUser strategy, just as the documentation says
    The TranslocoRootModule was generated by the cli
    i'm new to this library can anyone suggest me the correct way to implement transloco in my angular 12 project
    1 reply
    and how to update css according to the lang change
    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): 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

    Hi, I have an eagerly loaded module and would like to lazy load locales alone... Adding TRANSLOCO_SCOPE i believe works only with lazy loaded modules? or does it work with an eagerly loaded module too
    Hunter McMillen

    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",


    <ng-container  *transloco="let t">
      {{ t('cardholder.expenseGroup.create.form.maxlength', { field: t('cardholder.expenseGroup.create.form.name'), maxLength: nameMaxLength }) }}

    test output:

    Expected '{field} must be {maxLength} characters or less' to be 'Name must be 100 characters or less'.
    I need to combine language files on the fly — I am provided files like en.json, en-UK.json, en-US.json, but the locale files only contain locale-specific strings. So I need to load en.json first, then en-UK.json. Is this possible?
    Rodrigo Brechard
    Hi, I am trying to use the reference of other keys to handle plurals (as explained here: ngneat/transloco#359 ) but it does not seem to work
    I just copy pasted the code in stackblitz https://ngneat-transloco-esgpbz.stackblitz.io
    Hello, anyone knows how to prevent .json files from caching when building in production? im using a monorepo with angular and transloco...everything works smooth but once its built it doesnt update the json files
    Hi, I have a question, has anyone used transloco to generate different site builds according to the chosen language, for example: (xxx.com/en/, xxx.com/fr/...etc).
    I trying to run this command ng g @ngneat/transloco:scope tool-bar in order to add a new scope to my app. However am getting this error
    Schematic 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?
    Hey guys, anyone have any idea why transloco-persist-translations clears localstorage or session storage on refresh? I see the timestamp being updated on refresh everytime
    im actually using v1.0.5, cant use the latest as we're using 11.2.12 of angular
    Hey guys, does anyone knows the code replacement which I have mentioned below for ngx-translate getTranslations, "this.translateService.getTranslations(['languageNames'], [language])" in transloco
    Pericică Iustin

    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

    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>
    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 !

    Pascal Brewing
    Hello together ,
    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?
    thx in advance
    Hello, I'm new to use ngneat technology. I have download the https://ngneat.github.io/dialog/ code in my pc. Then ng s -o run successfully on 4200 port, however there is an empty page without any error. Can you tell me what's problem for that. Thanks in advanced. Harry
    continue: Uncaught Error Error: The component 'BaseDialogComponent' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available. how to fix the problem? Thanks a lot.
    Hello everybody. I have trouble to get transloco to work in a feature module. I get it to work in app.component.html with this code: <div>{{ 'hello' | transloco }}</div> but not in an component is a feature module. And I added imports: [TranslocoModule, SamplesRoutingModule] in my FeatureModule. Can anyone help? Error is: error NG8004: No pipe found with name 'transloco'.
    Is it possible with translocoDate to display the date with the name of the day ? It seems that we can only use « long » « medium » and « short » for dateStyle. Tx

    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(
              infoCount: footerCount

    The output i'm seeing is
    payment/request available

    "@ngneat/transloco": "^4.0.0",
    "@ngneat/transloco-messageformat": "^4.0.0",
    Root Module
      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}
    nvm... My bad i didnt read the docs which talk about additional functionality...
    Doing this fixes it
    "informationText": "payment/request {{paymentSendMoney.templateRule}} available",

    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
    Witold Kupś
    Hello, is it somehow possible to escape { in the json file? I have a html fragment like {lat,lon} and the transpiler treats it as a function (like {x, select, {}} for example)
    Witold Kupś
    I used other UTF chars for now (https://unicode-search.net/unicode-namesearch.pl?term=BRACKET). I saw that I can use other chars for formatting, but there is a lot to change, and also I need to keep backward compability so...
    Valentine Zavrak
    @RoboZoom have you figured it out with test failures when including the *transloco structural directive in template?
    Alejandro Morente
    Hi, I want to translate the following:
    • "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
    Valentyn Vasylevskyy

    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
    Alain Boudard

    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 !

    Yashar Moradi
    Hi Guys, I am trying to join the scoped translation files using ng generate @ngneat/transloco:join but I receive the following error. Any ideas what the problem might be?
    Unexpected token  in JSON at position 0
    Hello, this is the first time I'm using this library and I want to do more specific things since a week but I can't do it at all.
    • 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?