Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Alain Boudard
    @aboudard
    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';
    rhuitl
    @rhuitl

    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?

    narlack
    @narlack
    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
    @katscherator_gitlab
    Hey folks! Does anyone also have problems showing a loading template? For me it is not showing with this simple Module Decorator:
    @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 {}
    Mathieu Meylan
    @mathieu.meylan_gitlab
    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
    Airatiki
    @Airatiki

    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
    @lukechi1219
    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
    image.png
    is the above i18n json files placement supported by transloco ?
    Luke Chi
    @lukechi1219
    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
    @BojanKogoj
    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
    @KennyPicavet_twitter
    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
    Bas
    @Beenhakker

    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
    chrismarx
    @chrismarx_twitter
    Is there any way to provide an "alias" when manually preloading translations with the translocoService.load() method?
    https://ngneat.github.io/transloco/docs/language-api#load
    Twinstar2
    @Twinstar2

    what happenend to

    TranslocoTestingModule.withLangs()
    In Version 3.X?

    Twinstar2
    @Twinstar2

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

    TranslocoTestingModule.forRoot({
    translocoConfig: {...},
    });

    chrismarx
    @chrismarx_twitter
    @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
    @gregorycode
    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
    Neven
    @NevenLiang

    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
    Ghost
    @ghost~61d9fcd96da03739848de374
    Does anyone know why the lazy load strategy is not working for me?
    // 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) }
    image
    image
    The TranslocoRootModule is imported correctly, and I am using the preloadUser strategy, just as the documentation says
    The TranslocoRootModule was generated by the cli
    mtayyabmakki
    @mtayyabmakki
    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
    Brian
    @seadonk

    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

    Siddharth
    @siddharth1903
    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
    @mcmillhj

    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'.
    Richard
    @richardsugg_twitter
    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
    @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
    PatoDeVille
    @PatoDeVille
    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
    Zak
    @DMZakaria
    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).
    Munyasi
    @Munyasi
    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?
    Rambo
    @johnRambo2k14
    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
    sharmile
    @sharmile
    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
    @PericicaI_twitter

    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 !

    Pascal Brewing
    @DrMabuse23
    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
    harrypassport
    @harrypassport
    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
    harrypassport
    @harrypassport
    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.
    zedL
    @zedL
    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'.
    vega3000
    @vega3000
    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
    Siddharth
    @siddharth1903

    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}
      ]
    })
    Siddharth
    @siddharth1903
    nvm... My bad i didnt read the docs which talk about additional functionality...
    Doing this fixes it
    "informationText": "payment/request {{paymentSendMoney.templateRule}} available",
    Alegiter
    @Alegiter

    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?)