by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Shahar Kazaz
    @shaharkazaz
    try to revisit our docs :slight_smile:
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    ok can you please just tell me one thing. if i use inline loader, should the overall loader in the global level should be removed ?
    Ya i'm breaking my head on this since two days :weary:
    Itay Oded
    @itayod
    Hi Hari, don't you have any "common" translations in your app? that you share between the modules?
    also try to read this blog
    it might clear some of your questions
    Shahar Kazaz
    @shaharkazaz
    @get_hariharan_twitter Have you tried to implement the loaders locally and not on stackblitz?
    I have some code that works locally but stackblitz shouted on an import error, you can try to clone the transloco repo and work with the sample app
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    @shaharkazaz thanks for the response. I have tried same kind of code in my local with my own app, which exhibited the same behavior which is why I tried to recreate on stack blitz and submitted it for having a better look
    Shahar Kazaz
    @shaharkazaz
    @get_hariharan_twitter I changed some stuff in your example, can you try this example locally? it's based on what you posted here
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    Thanks for taking your time in checking it. Let me check and get back
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    Hi @shaharkazaz i am trying to do the same in local, now I'm getting Missing translation for my all my keys manageAlarm.grid.newAlarm
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    The problem is when we use specify the TRANSLOCO_SCOPE in outer module provider it works. But when i move the scope inside nestedLazy Module it throws missingKeys exception, earlier i had the same exception in stackblitz now. which is unable to load all fallback lang.... so i guess its something to check in the lib code ? or is there someone here who have used the lib like this ?
    Shahar Kazaz
    @shaharkazaz
    @get_hariharan_twitter please create a reproduction repo, that would be the best way to help you :slight_smile:
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    https://stackblitz.com/edit/ngneat-transloco-nndjgf
    Here is the repo for reproducing. You can see the missing Translation error on console
    Shahar Kazaz
    @shaharkazaz
    @get_hariharan_twitter as I said, I think there is an issue with stackblitz I tried as well.
    If you want assistance please create a git repository with a reproduction
    When I said "try it locally" that meant to run the code on your machine and not stackblitz.
    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter

    Yes i do understand, that. And i did try it on my application and i get the same missing keys exception.

    I will proceed to create a git repo and share it with you . Thanks

    Karim Tayie
    @KarimTayie
    Screenshot from 2020-05-22 17-34-19.png
    Screenshot from 2020-05-22 17-34-01.png
    Screenshot from 2020-05-22 17-34-19.png
    Hello, I have a question, but I am not sure if it's ok to ask it here.
    I am using transloco with its transloco locale module and I am testing a component with spectator
    when I run the spec file with this line.
    it gives this error.
    any help?
    Shahar Kazaz
    @shaharkazaz
    Have you tried running some string diff function for debugging? might point us
    Weston
    @ronnyek
    I'm really torn between transloco and @angular/localize
    I like the idea of performance because translations are compiled ahead of time for the app, but prefer transloco in just about every OTHER feature
    Weston
    @ronnyek
    reRenderOnLangChange I get what that does, but if you set that to false, how do you specify which language should be rendered
    Weston
    @ronnyek
    Can I have a module dynamically provide translations to consumer? I see in documentation about scope, but I'm talking more like from a library in an nx workspace
    I want the library to have its own translations so we dont have to specify those messages from each and every app consuming that library
    Itay Oded
    @itayod
    @ronnyek reRenderOnLangChange simply doesn't listen for language change and therefore doesn't update the view when the language changes, so it will render the view only once "on init"
    about working in a monorepo environment I recommend you read this and if you have any further questions you are welcome to ask here
    Karim Tayie
    @KarimTayie
    Screenshot from 2020-05-24 03-06-02.png

    @shaharkazaz thanks for your suggestion. after a long debugging session, I have found the cause of the problem.
    when using transloco's translocoCurrency pipe it renders the HTML like this (in my case)
    and when I test this code with this

    expect(spectator.query('table tbody tr:first-child td')).toHaveText(
          '10.00 EGP'
        );

    it uses jquery's .text() under the hood which encode HTML entities (  in our case) to their direct unicode equivalence and so &nbsp: becomes String.fromCharCode(160) and that's why it doesn't equal to whitespace (String.fromCharCode(32))
    for more explanation please refer to these links
    (https://stackoverflow.com/questions/22036576/why-does-the-javascript-string-whitespace-character-nbsp-not-match)
    (https://stackoverflow.com/questions/5237989/how-is-a-non-breaking-space-represented-in-a-javascript-string)

    I fixed this line by adding \xa0,

    expect(spectator.query('table tbody tr:first-child td')).toHaveText(
          '10.00\xa0EGP'
        );
    Shahar Kazaz
    @shaharkazaz
    @KarimTayie :thumbsup:
    Raziel
    @rraziel
    That's not very intuitive heheh
    NerdyB713
    @NerdyB713
    I'm calling this.translocoService.translate('demo') on NgOnInit() but no translation files are loaded. It says the translation is missing. If I put the *t directive in the HTML of the parent container, then it works for some reason. Is there any reason why the translation files are not loading in the component file?
    Chau Tran
    @nartc
    Is anybody here using ngx-quicklink with transloco-preload-langs-module? There seems to be a typing conflict for requestIdleCallback and cancelIdleCallback
    image.png
    I already created an issue ngneat/transloco#291 on both repo
    mcanoglu
    @mcanoglu

    Hi! First thank you for the great lib. Now my question:
    I am trying to use the lib also in storybook in an nx managed monorepo. I provide the config and loader inside the stories file of storybook inside my component. For the translations I have made an Object with the translations just for storybook. But transloco does not seem to find the translations.

    const i18n = {
      en: {
        categories: 'Categories',
        milestones: 'Milestones',
        calendarweeks: 'Calendar weeks',
        shared: {
          complaints: 'Complaints',
        },
      },
      de: {
        categories: 'Kategorien',
        milestones: 'Meilensteine',
        calendarweeks: 'Kalenderwochen',
        shared: {
          complaints: 'Beanstandungen',
        },
      },
    };
    
    class StorybookLoader implements TranslocoLoader {
      getTranslation(lang: string) {    
        return of(i18n[lang]);
      }
    }
    
    export default {
      title: 'ExampleComponent',
      decorators: [
        moduleMetadata({
          imports: [TranslocoModule],
          providers: [
            {
              provide: TRANSLOCO_LOADER,
              useClass: StorybookLoader,
            },
            {
              provide: TRANSLOCO_CONFIG,
              useValue: {
                availableLangs: ['en', 'de'],
                defaultLang: 'en',
                reRenderOnLangChange: true,
              },
            },
          ],
        }),
      ],
    };

    I am getting the error: When using the default fallback, a fallback language must be provided in the config!

    mcanoglu
    @mcanoglu
    The fallback is not the problem. The strucural directive transloco is not available in the html template. But I can inject the translocoService inside the component.ts and it is working.
    Raziel
    @rraziel
    Hm wouldn't you need to declare the component?
    (that's usually what happens to me, Angular is like "what is this async pipe you idiot", I check if I'm importing CommonModule, and it's just because the component is not in my module declarations)
    mcanoglu
    @mcanoglu
    Hi Raziel! Thank you for the answer. The component is declared inside the ts file. Everything works except the directive *transloco inside the template. It is not rendered.
    <ng-container *transloco="let t">
            {{ t(categories)}}
     </ng-container>
    This one above
    When I translate with translocoService inside the component everything is OK! But not in the HTML Template
    mcanoglu
    @mcanoglu

    OK! I have finally solved it using inline loaded scopes. Here is my workaround for anyone, who is struggling with the same problem (It is not perfect because I have to load the translations also inside the constructor with the service):
    I have created an extra module for transloco and storybook to not blowing up my component.stories file:

    @Injectable({
      providedIn: 'root',
    })
    export class StorybookTranslocoLoader implements TranslocoLoader {
      constructor(
        @Inject(STORYBOOK_TRANSLOCO_TRANSLATIONMAP)
        private translationMap: TranslationMap
      ) {}
    
      getTranslation(lang: string) {
        return of(this.translationMap[lang]);
      }
    }
    
    const translocoConf: TranslocoConfig = translocoConfig({
      availableLangs: ['en', 'de'],
      defaultLang: 'en',
      fallbackLang: 'en',
      reRenderOnLangChange: true,
      prodMode: false,
    });
    
    export const translocoConfigProvider = {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConf,
    };
    
    export const translocoLoaderProvider = (storybookScope: string) => {
      return {
        provide: TRANSLOCO_SCOPE,
        useValue: {
          scope: storybookScope,
          loader: StorybookTranslocoLoader,
        },
      };
    };
    
    @NgModule({
      imports: [TranslocoModule],
      exports: [TranslocoModule],
    })
    export class StorybookTranslateModule {
      constructor(
        @Inject(STORYBOOK_TRANSLOCO_TRANSLATIONMAP)
        private translationMap: TranslationMap,
        private translocoService: TranslocoService
      ) {
       for (const lang of Object.keys(this.translationMap)) {
          this.translocoService.setTranslation(translationMap[lang], lang);
        }
      }
    
      static forRoot(
        translationMap: TranslationMap,
        scope: string
      ): ModuleWithProviders {
        return {
          ngModule: StorybookTranslateModule,
          providers: [
            {
              provide: STORYBOOK_TRANSLOCO_TRANSLATIONMAP,
              useValue: translationMap,
            },
            {
              provide: STORYBOOK_TRANSLOCO_SCOPE,
              useValue: scope,
            },
            translocoConfigProvider,
            translocoLoaderProvider(scope),
          ],
        };
      }
    }

    And here the example component.stories file (parts of it, which are relvant)

    // Translationmap is just a HashMap
    const translationMap: TranslationMap = {
      en: {
        foo: 'bar',    
        exampleScope: {
          bar: 'foo',
        },
      },
      de: {
        foo: 'bar_de',    
        exampleScope: {
          bar: 'foo_de',
        },
      },
    };
    
    export default {
      title:  'ExampleComponent',
      decorators: [
        moduleMetadata({
          imports: [
            StorybookTranslateModule.forRoot(translationMap, 'exampleScope'),
          ],
        }),
      ],
    };
    Shahar Kazaz
    @shaharkazaz

    @NerdyB713 loading the translations is an asynchronous task while translate is a synchronous function.
    You have 2 options:

    • Subscribe to the transloco service events and use translate in the subscription.
    • Use selectTranslate

    The structural directive is waiting for the translation to load on its own, that's why it's working in the template.

    Hari Haran - hyped for #ngIndia
    @get_hariharan_twitter
    @shaharkazaz sorry for the delay. Please find my repo Transloco NestedModules
    • Please advice where am I wrong or is there a better approach for my scenario
    Shahar Kazaz
    @shaharkazaz
    @get_hariharan_twitter I'll take a look once I get the chance :)