Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Hello, I'm new with transloco and I need to translate the return part with transloco in order to use my frequency pipe in my template. How can I do please?
    import { PipeTransform, Pipe } from '@angular/core'
        name: 'frequency'
    export class FrequencyPipe implements PipeTransform {
        transform(frequency: any): string {
            switch (frequency) {
                case 'WEEKLY':
                    return "toutes les semaines"
                case 'MONTHLY':
                    return "tous les mois"
                case 'SEMIANNUALLY':
                    return "deux fois par an"
                case 'QUARTERLY':
                    return "chaque trimestre"
    5 replies
    Fahad Mansoor

    Hi guys, I was looking at this ngneat/transloco#110

    And the last comment in that issue got me thinking, What is the prefferred way of cache busting with transloco

    1 reply
    card cat
    Hi guys, I just discovered transloco and could not find anything regarding localization of routes in the docs (something like https://github.com/Greentube/localize-router does for ngx-translate. Did I miss this or is this feature not (yet?) included?
    2 replies

    Is it possible to get a translation file when working with a scope from an inline loader? @shaharkazaz

    I tried using selectTranslation(), but it doesn't get the translations specified in an inline loaded scope.


    I think I found a solution to my recent post.

    I added this to the constructor
    @Inject(TRANSLOCO_SCOPE) private scope: ProviderScope

    Then I changed the method trigger from:

    It seems to do the trick!

    Hey :) I am using transloco-keys-manager find to check my t-keys to be covered but the find-cmd also find things nothing to do with translations in my HTML stuff. So the find-cmd show errors when using the routerlink attribute for example: [routerLink]="['..', param1 ]" ... does anybody know how can I prevent this kind of findings?
    1 reply
    Lukas Heddendorp
    I have a problem with the keys manager, for some scopes it creates subdirectories. The goal was to only have one file per langauge though.
    I removed all scope providers but for some reason a couple of files lead to subdirectory scopes.
    When running the app, it prints the translation key instead of the placeholder form the file
    Lukas Heddendorp
    So the question would be how to configure the key manager in a way that it puts all keys into one file
    Shahar Kazaz
    @heddendorp Hey, scopes are supposed to be different files since they are used for lazy loading (besides the benefits of a more organized translation) so if you intend that your keys will be in a single file you shouldn't use them.
    If you are still having problems please provide a small reproduction so we can have a better grasp of what's going on :slight_smile:
    1 reply
    Martin Bech

    I need to use som translations in a Modal, where I can’t use transloco in the template, so Im using the transloco service. I need to translate 4 strings, title, message, ok and cancel, normally in the old days of angular translate I would call the method with and array of strings like so [ “ALERT_HEADER”,”ALERT_MESSAGE”,”ALERT_OK”, “ALERT_CANCEL” ] and I would get back an object where I would be able to use it like this translation.ALERT_HEADER, translation.ALERT_MESSAGE etc.

    However with translocoservice.translate or translocoservice.selectTranslate I only get back and array of strings, so I have to use it as an array translation[0] for the alert header etc.

    Is there a better way of doing this?

    3 replies
    António Santos

    Hey transloco community,

    I know I can pass a ProviderScope to:
    this.translocoService.selectTranslate(key, {}, scope);

    But I need a way of getting all the keys from an object or single file within the scope, can I also pass a ProviderScope to:
    this.translocoService.selectTranslation() or this.translocoService.selectTranslateObject()

    Hello. Anyone has a clue on why transloco doesn't work on appcomponent? Tried with instant (ngOnInit) and pipe. No dice. It works perfectly if I use in any other place
    1 reply

    I had the exact same problem when I was working with a scope from an inline loader.

    I solved it by using
    @Inject(TRANSLOCO_SCOPE) private scope: ProviderScope
    followed by

    More information (and a code example) some posts above.

    António Santos

    I had the exact same problem when I was working with a scope from an inline loader.

    I solved it by using
    @Inject(TRANSLOCO_SCOPE) private scope: ProviderScope
    followed by

    More information (and a code example) some posts above.

    I saw your posts above, that's what helped me most to achieve a component scope for my project :)
    But that selectTranslation part didn't work for me, and I don't know why.

    1 reply
    Hi! We use calls to selectTranslateObject() in our code, and we realized it doesn't give us the fallback translation when a key is missing in a language (we have set fallbackLang to true in the config). selectTranslate() works. is this a known issue? Is there a reason for this?
    2 replies
    Hello :) I've a module with providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'login' }],. In the component templates and the components I'm using transloco successfully, but the transloco-key-manager complains for the translations which are done by the service inside the component.
    this.snackBar.open(this.i18n.translate('login.unknownCredentials'), undefined, { duration: 3000 });
    Now when I run yarn run transloco-keys-manager find --translations-path assets/i18n I get missing keys for login.unknownCredentials
    When using the default locale mappings, I noticed that translocoLocaleService.localeChanges$ is updated twice with the new value instead of once. It's lower priority, but if it is not just me, I can open an issue.
    Thierry Lévèque
    Hi, I just tried creating a brand new Angular project following the Getting Started guide.... And it does not work.... I am using node v12 and Angular 11 (but same problem with Angular 10). There is no error, but the ressource files are never loaded. Here is a stackblitz example I just did: https://stackblitz.com/github/tleveque23/translocotest. Any idea what I am doing wrong?
    Greetings all - I'm having an issue where unit tests fail when including the *transloco structural directive in my template. Via manual usage (ie me running the software, and clicking) everything works great. But in executing the unit test, my debugElement.query operations are not finding the divs with transloco included. Refactored to exclude the directive, there are no problems
    Here is the template code:
    <div *transloco="let t;">
      <div nz-popconfirm
        <fa-icon class="trashIcon" [icon]="trash"></fa-icon>
    When refactored to this, it passes:
      <div nz-popconfirm
        <fa-icon class="trashIcon" [icon]="trash"></fa-icon>
    Here's the unit test:
    it('emits own id on confirmed click', () => {
        const testID = '12a';
        component.id = testID;
        popDebugEl = fixture.debugElement.query(By.css('div[nz-popconfirm]'));
        let emittedID: string | number;
        component.deleteItem.subscribe((id) => (emittedID = id));
        popDebugEl.triggerEventHandler('nzOnConfirm', null);
    The component is being built in a test environment with a transloco module configured per the docs:
    beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [DeleteItemComponent, FakePopConfirm],
          imports: [CommonModule, FontAwesomeTestingModule, getTranslocoModule()]
        // advance();
    Also, I'm using jest
    Any thoughts/ideas with what could be wrong here?
    Also, the component creates successfully (ie is truthy) in both cases shown above
    Dionatan Gonçalves

    Hello guys!
    Im looking for a working example of transloco inside a custom angular lib (not on a monorepo). I would like to handle all the translation inside the lib itself by having a dedicated i18n folder on it, also on some inputs, i would like to let the user pass in translation keys from the "user side" i18n, not the lib.

     toolbarActionButtons: ToolbarActionButton[] = [
          label: 'actionButton.label',
          size: ActionButtonSizeEnum.small,
          icon: 'icon-upload-button',
          event: () => console.log('action2'),
          label: 'actionButton.label',
          size: ActionButtonSizeEnum.large,
          icon: 'icon-add-circle-2',
          event: () => console.log('action1'),

    This is an example of a input to pass to the lib itself, the label is a key from the user i18n, not the lib, but its the lib that translates it.
    In short: Let the user pass in keys from the user side i18n, also, let the lib itself have dedicated i18n to internal translation.

    7 replies
    Dionatan Gonçalves
    PS: My lib doesn't have a root module, every component has its own module so I can consume individually.

    Hi, first time starting to use transloco, after realizing that angulars i18n support only supports static strings 🤦‍♂️. I have just have one question:

    I have an angular project with multiple projects in it, so when I run the i18n:extract command, I see that I can provide cli options like transloco-keys-manager extract --input src/app --output src/assets/i18n, but the command still fails with:

        throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
        at validateString (internal/validators.js:117:11)
        at Object.resolve (path.js:980:7)
        at s (/Users/chrismarx/github/proj-who-anacod/web/anacod-app-universal/node_modules/@ngneat/transloco-keys-manager/helpers/resolveConfig.js:86:25)
        at resolveConfigPaths (/Users/chrismarx/github/proj-who-anacod/web/anacod-app-universal/node_modules/@ngneat/transloco-keys-manager/helpers/resolveConfig.js:87:17)
        at Object.resolveConfig (/Users/chrismarx/github/proj-who-anacod/web/anacod-app-universal/node_modules/@ngneat/transloco-keys-manager/helpers/resolveConfig.js:57:9)
        at Object.buildTranslationFiles (/Users/chrismarx/github/proj-who-anacod/web/anacod-app-universal/node_modules/@ngneat/transloco-keys-manager/keysBuilder.js:1:506)
        at Object.<anonymous> (/Users/chrismarx/github/proj-who-anacod/web/anacod-app-universal/node_modules/@ngneat/transloco-keys-manager/index.js:2:962)

    It fails on this line: path.resolve(process.cwd(), t, e);, because t is undefined. If I manually replace t with "", everything works.


    hy, I have a shared component that I use twice. But I need two differents translations.
    For exemple:

    // this is my shared component //
      <div  *transloco="let t;">
      <h2>{{ t('title') }}</h2>

    I need that :
    In compA, title = "Car"
    In compB, title="Boat

    How can I do that please? 🙏

    1 reply
    Fayas Ismail
    Hi,I have a problem with inline loaders. I have been loading with assets folder. Now my assets i18n files are growing. I have tried to move a translation files to a feature module it belongs. But it's loading from feature module.
    1 reply
    Hi, I have a problem with Angular Language Service. I am getting tsconfig.json returned exit code 1, stderr: Error: Error on worker #1: Error: Expected UMD module file (/home/x/Projects/x/y/node_modules/flat/index.js) to contain exactly one statement, but found 7. error and the full language service support is missing.
    Has anyone spotted the same issue?
    Oleksandr Tatarinov
    HI. I try migrate from ngx-translate to trasnsloco using migration schematic but get this error and not know what doing with that.
    `` oleksandr@Oleksandrs-MacBook-Pro back-office % ng g @ngneat/transloco:migrate
    ✔ ✍ Which library did you use? · NgxTranslate
    ✔ ✍ Which folder will contain the translation files? · ./src/app/i18n
    Property 'from' does not match the schema. 'NgxTranslate' should be one of [object Object],[object Object].```
    Nikolay Rudkov
    Hi guys, is it possible to force refresh the localization file no matter what - during runtime? (localization file atm downloaded via factory on app init)
    Ramon Blanquer
    Hello :) I have a question about the structural directive. Where should I put it? Should I bubble it up to the uppermost HTML DOM element that's the common ancestor for all the places where there are translations and calls to t()? Or should I simply add it blindly in each component that uses translations in a <ng-container *transloco="let t;">...? What's the best practice? It's an added step that I didn't have to think about with ngx-translate. I guess transloco is more efficient that way, that's why I prefer to use it and its structural directives. Thank you!
    Hi all, I want to use transloco in an application, which have to use a shared lib with ngx-translate. Do you see any problem to mix the both in the same application?
    Hi guys, with angular template if i use scope home which is the name of file <div *transloco="let t; scope: 'home'"> and call does it load synchronously ?
    {{ t('categorylbl') }}
    vs removing the scope and calling it {{ t('home.categorylbl') }} = async?
    It seems the former does not wait until the translations are fetched by api with slow 3g speed
    Hi, is there a library/extension for transloco with a UI to view different translations. i.e Like a table with each translation in different table.
    i am new to transloco and have a problem.
    I am using PrimeNG and created a menubar.
    The items of the menubar are created programmatically:
    this.menuitems = [ { label: 'header.items.dashboard.label', routerLink: ['/dashboard'], command: (event) => { this.title = event.item.label; this.items = [{label: 'header.items.dashboard.label'}]; }, }
    As you can see i would like to translate the label. I already have the 'header.items.dashboard.label'-tag in my json file. But i dont know how to translate it using this.service.translate or this.service.selectTranslate :/

    hi i have this issue that when i use this, it just does not render. any ideas?

    <ng-container *transloco="let t">
    <p>{{ t('name')}}</p>

    7 replies
    Elliott Regan
    Hey! I'm wondering if Transloco can be used for translations in the AngularJS side of a hybrid app?
    when i use this in service, this works. but in html my element just dissapears? this.service.selectTranslate('name').subscribe(console.log);
    core.js:10101 NG0303: Can't bind to 'translocoLang' since it isn't a known property of 'ng-container'.
    1 reply
    Hello, is it possible to dynamically reference other parts of the language json file. I'm trying to achieve the following:
        // json
        "deleteMessage": {
          "toy": "{count, plural, =0 {} one {Toy} other {Toys}}",
          "title": "Delete {count, plural, =0 {none selected} one {single} other {#}} {collectionName}"
        const count = 10;
        this.result = this.translocoService
          .selectTranslateObject('deleteMessage', {
            toy: { count: count },
            title: { count: count, collectionName: '{toy}' },
          .subscribe((result: any) => {
            result.title = result.title.replaceAll(/{toy}/g, result.toy); // <- can this be done automatically
            this.result = result;
            console.log(result); // result.title: "Delete 10 ‎Toys‎"
    Adrijan Mahmuti
    hello, im having this error when i tried to migrate from ngx-translate to transloco and removed few errors which transloco didnt have alternatives for them
    ERROR TypeError: ctx_r3.translate.getLangs is not a function