Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Alain Boudard
    I tried to install the latest version 2 : 2.23.5, but there seems to be a bug in the schematics, the path for environment config is written with backslashes, not slashes. This is what you get after ng add run in the transloco-root.module.ts : import { environment } from '..\environments\environment';

    Hello! I'm using transloco in a project without Angular CLI, and I get this big red warning:

    Unable to load workspace config from angular.json, .angular.json, workspace.json. Defaulting source root to 'src'

    The src directory is perfect. Is there a way to silence that message?

    Hello everyone!
    We use in our application transloco and I was tried to find some solution to edit i18n files with compare translations. But i hasnt found any good solution. May anyone share your experience with using some tools for that?
    5 replies
    Tobias Karzewski
    Hey folks! Does anyone also have problems showing a loading template? For me it is not showing with this simple Module Decorator:
      exports: [ TranslocoModule ],
      providers: [
          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 {}
    Mathieu Meylan
    Is it possible to provide a function when a missing translation event is triggered, in addition to the warning log ? My use case is I'd like to report those events to catch potential forgotten translations.
    1 reply

    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.1

    who faced similar error?

    1 reply
    Luke Chi
    Hello folks! I have a question about scope:
    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
    is the above i18n json files placement supported by transloco ?
    Luke Chi
    Hey there~ I would like to translate transloco "/docs" into zh-TW ( aka zh-Hant ) . But I find that docusaurus.config.js in transloco "/docs" folder does not setup i18n support. Also the "/docs" folder not arranged in i18n way, which is not in "/docs/en/docs" but is in "/docs/docs". In the case, I think may I put the zh-TW version in my own git-page, say https://lukechi1219.github.io/transloco/docs for example. Is this Okay?
    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?)