Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Valentine Zavrak
    @zavrakv
    It happens if I set
    missingHandler: {
        useFallbackTranslation: true
    },
    Entire config:
    {
          provide: TRANSLOCO_CONFIG,
          useValue: translocoConfig({
            availableLangs: ['en', 'de'],
            fallbackLang: "en",
            missingHandler: {
              useFallbackTranslation: true
            },
            defaultLang: 'en',
            failedRetries: 2,
            // Remove this option if your application doesn't support changing language in runtime.
            reRenderOnLangChange: true,
            prodMode: environment.production,
          })
        },
    8 replies
    smmarrocco
    @smmarrocco
    hey everyone, came here instead of spinning up an issue in hopes to get a more informal response. Will transloco officially support Angular 11?
    Shahar Kazaz
    @shaharkazaz
    @smmarrocco Of course, we will release the update shortly :slight_smile:
    smmarrocco
    @smmarrocco
    @shaharkazaz fantastic! Thank you
    avifox
    @avifox
    Hi everyone.
    Does anyone have an example of component test where we switch language using the translateService.setActiveLang('fr') and then see if the page html tag contents have changed?
    Brian
    @seadonk
    @avifox I was having the same issue. The language isn't immediately available when you set it, but you can create a promise to await, listening to the load event after you set the language. Once the language loads you can call detectChanges.
    it('should get overridden language translation with lang', async function() {
          expect('.i18n').toHaveText('This is english.');
          await new Promise(resolve => {
            translocoService.events$.pipe(
              filter((t: TranslocoEvents) =>  t.type === 'translationLoadSuccess')
            ).subscribe(t => resolve());
            translocoService.setActiveLang('es');
          }).then(() => spectator.detectChanges());
          expect('.i18n').toHaveText('Esto es español.');
        });
    avifox
    @avifox
    Hello, is there a way to unit test if all components have all required translations in the en.json / fr.json... For example if I have used {{ t('userRegistration.firstName') }}, I want an automated test to inform me if this is missing in the json translation files. Is there an existing functionality or way to do this?
    @seadonk Thank you. But is it necessary to use the spectator, can you also show me your BeforeEach function please?
    Shahar Kazaz
    @shaharkazaz
    @avifox Sounds like you might want to check our keys manager :slight_smile:
    avifox
    @avifox
    Thank you @shaharkazaz - The library looks super cool :) - however I was wondering if it is possible to do this in a user.component.spec.ts file. Let's say I have the user.component.html with the tag below:
    <label for="firstName">{{ t('firstNameqqq') }}</label>
    When I run the ng test, the following is displayed in the browser console: "Missing translation for 'userRegistration.firstNameqqq'"
    I want a unit test like this to tell me if any keys is missing or changed:
    it('should check if translation in component is missing', () => {
    // var consoleData = check if translation is missing
    expect(consoleData).not.toContain('missing translation ...');
    });
    Is this feasible?
    Shahar Kazaz
    @shaharkazaz
    @avifox I'm not sure what you are trying to test here, if it's missing keys you are looking for the keys manager as part of your pipeline is the way to go.
    What's the benefit of testing it at a component level? texts are things that change.
    Brian
    @seadonk

    @avifox spectator is not necessary, but it really makes everything easier. My examples are below.
    For missing keys, I agree with @shaharkazaz , if you want to check for missing keys, just run transloco-keys-manager find and look for the missing and unused keys. If you wanted it automated, maybe there is a way to parse the output and make it a pass/fail step in your build process.

    i pulled out my setLanguage promise into a function that i can call:

      /** setting the language does not happen immediately. It must first load,
       * then change detection must fire.
       * This method will set the lang, and wait for it to load and detect changes. */
      async function setLang(lang: string) {
        await new Promise(resolve => {
          translocoService.events$.pipe(
            filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
          ).subscribe(t => resolve());
          translocoService.setActiveLang(lang);
        }).then(() => spectator.detectChanges());
      }

    here is my beforeEach:

    beforeEach(() => {
        // tests were written for the case that spanish is the default language
        TranslocoConfigProvider.useValue.defaultLang = 'es';
        spectator = createSpectator();
        translocoService = spectator.inject(TranslocoService);
        // set lang here so we can make sure it is loaded before running tests
        setLang('es');
      });

    make sure to also use the TranslocoTestingModule, here's what I used, borrowed from Transloco:

    export const languageMap = {
      en,
      es,
      'i18nTest/en': admin,
      'i18nTest/es': adminSpanish,
      'lazyPage/en': lazy,
      'lazyPage/es': lazySpanish,
      'mf/en': transpilersMessageFormat,
      'mf/es': transpilersMessageFormatSpanish
    };
    
    export function getTranslocoTestModule(config: Partial<TranslocoConfig> = {}) {
      return TranslocoTestingModule.withLangs(
        languageMap,
        {
          availableLangs: ['es', 'en'],
          defaultLang: 'es',
          fallbackLang: 'en',
          ...config
        }
      );
    }
    Brian
    @seadonk
    I should note that I'm able to unit test Structural and Pipe translations, but not attribute translations. I'm also not able to test ICU message format translations, they appear to take longer to render and I'm not sure what to wait for. All of them work in practice in my project, just not in unit tests.
    Siddharth
    @siddharth1903
    Hi All, I'm looking to get started with this library for my project. I remember there used to be a feature comparison table between ngx-translate, transloco and a few other libraries. Is that removed?
    Shahar Kazaz
    @shaharkazaz
    @siddharth1903 We decided to remove the comparison table, but out of curiosity what interests you there?
    @seadonk no need to parse the output, if you have missing keys the process exits with code 1, this one done so you can integrate it easily as part of your pipeline.
    avifox
    @avifox
    @seadonk Thanks a lot :)
    @shaharkazaz Thank you very much. I have installed the key manager. It is awesome. However I am getting an issue. I have added this to my package.json:
    "i18n:find": "transloco-keys-manager find --translations-path assets/i18n"
    Then I run: npm run i18n:find
    If there are no missing translations, it runs fine. But when there are missing translation, it gives me a table with the missing translations plus some errors
    image.png
    Shahar Kazaz
    @shaharkazaz
    @avifox glad to hear, as I stated before, the error thrown at the end is ok.
    We throw it intentionally, so you can integrate it as part of you CI pipeline and if a key is missing the pipeline will fail (and prevent deployment or whatever you do after it).
    avifox
    @avifox
    @shaharkazaz Thanks a lot.
    Shahar Kazaz
    @shaharkazaz
    @avifox sure thing, that's what this gitter is for, so we can help each other :grin:
    @/all There is a new disscusions tab on Github, feel free to use it as well!
    smmarrocco
    @smmarrocco

    Hey everyone! Curious question about providing params to a json array with just the template.

    For example, consider the following language file

    {
        "LISTS": [
            "List Item 1 {{param}}",
            "List Item 2",
            "List Item 3 {{param}}"
        ]
    }

    Does anyone have a solution to provide the parameter while using the above in a *ngFor?

    Doing it like such does not work, which is expected:

    <ul>
        <li *ngFor="let item of ('LISTS' | transloco: { param: 'Hello World'})">item</li>
    </ul>

    I was able to achieve this by using selectTranslationObject in the respected component file and change my json array to an object of objects but it would be pretty cool if I can accomplish this just in the template

    Shahar Kazaz
    @shaharkazaz
    @smmarrocco Hey! you are right, that could be cool and actually pretty easy to support since we already support translation objects.
    I'll find the time to add this ability where given an array, each value will be transpiled :thumbsup:
    So keep an eye out for the next version :wink:
    smmarrocco
    @smmarrocco
    @shaharkazaz too cool!! Fantastic, glad it’s doable. Will keep an :eyes: out! Thank you
    Shahar Kazaz
    @shaharkazaz
    @smmarrocco released in v2.20.0 :slight_smile:
    smmarrocco
    @smmarrocco
    @shaharkazaz way too excited for this! thank you for the quick delivery, going update now
    Dale Nguyen
    @dalenguyen

    Question on translocoDate PIPE. How can I display day & month only? (E.g. Dec 12). In the documentation, the guide is limited.

    https://github.com/ngneat/transloco/blob/master/projects/ngneat/transloco-locale/src/lib/pipes/transloco-date.pipe.ts

       * date | translocoDate: {} : en-US // 9/10/2019
       * date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM
       * date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time
       * 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970
       * '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019
    Shahar Kazaz
    @shaharkazaz

    @dalenguyen Transloco L10N uses the native Intl, you can read more about date formatting here.
    The following code should produce the output you want:

    new Intl.DateTimeFormat('en-US', {month: 'short', day: 'numeric'}).format(Date.now())

    This means that {month: 'short', day: 'numeric'} is the config you are looking for :smile:

    1 reply
    Victor Diaz
    @vdiaz1130

    Hello. I'm trying to follow the example here https://ngneat.github.io/transloco/docs/inline-loaders but I'm lacking clarity. I have the following JSON:

    {
      "generalSettings": {
        "title": "General Settings",
        "header": "Edit the configuration for your store.",
        "clientInformation": {
          "sectionLbl": "Client Information"
        }
      }
    }

    In my features module, I have:

    imports: [
      ...
      TranslocoModule
    ],
    declarations: [
      ...all components
    ],
    providers: [
      {
        provide: TRANSLOCO_SCOPE,
        useValue: {
          scope: 'shopSettings',
          loader,
        },
      },
    ],

    The template works well. I have the following:

    <div *transloco="let t; read: 'shopSettings.generalSettings'">
      <h2>{{ t('title') }}</h2>
      {{ t('header') }}
    </div>

    However, in the component file, I can't seem to load the translation. Each of the following queries logs error:

    constructor(
      private translocoService: TranslocoService,
    ) {}
    
    ngOnInit() {
      let result = this.translocoService.translateObject('shopSettings.generalSettings.clientInformation');
      result = this.translocoService.translateObject('generalSettings.clientInformation');
      result = this.translocoService.translateObject('clientInformation');
    }
    
    // outputs:
    // Missing translation for 'shopSettings.generalSettings.clientInformation'
    // Missing translation for 'generalSettings.clientInformation'
    // Missing translation for 'clientInformation'

    What am I missing? Thanks!

    Shahar Kazaz
    @shaharkazaz
    @vdiaz1130 Have you seen this section in our docs? I think that's the answer to your question :slight_smile:
    Methods prefixed with translate are synchronous and will only work if your translation is already loaded.
    You can use selectTranslateObject
    Victor Diaz
    @vdiaz1130
    image.png

    @shaharkazaz Thanks for the reply. I've tried selectTranslateObject as you suggested and I get the same error message. To be clear, the en.json file is in a directory within the feature module:
    https://files.gitter.im/5d5555fcd73408ce4fc87fc0/qquh/image.png

    and I have a loader function in the feature module:

    export const loader = ['en', 'es'].reduce((acc, lang) => {
      acc[lang] = () => import(`./_i18n/${lang}.json`);
      return acc;
    }, {});

    The template markup sees the translations but I can't get it to show up in the component logic.

    Victor Diaz
    @vdiaz1130
    I figured it out - had to add this.scope (reference to @Inject(TRANSLOCO_SCOPE) private scope):
    let result = this.translocoService
      .selectTranslateObject(
        'generalSettings',
        {
          title: { value: 100 },
        },
        this.scope, // added this...
      )
    Shahar Kazaz
    @shaharkazaz
    :thumbsup:
    pookdeveloper
    @pookdeveloper
    Hi what is the purpose of "transloco.config.js"
    if I delete this file it's still working, thanks!!!
    François
    @GrandSchtroumpf

    Hello, I'm using the TranslocoService in a pipe and I would like to access a lazy loaded scope when I do :

    this.transloco.translate('key', {}, 'scopeName')

    I've got Missing translation for scopeName.key. I tried to provide the TRANSLOCO_SCOPE in the module in which the pipe is declared, but it didn't help. Anyone has an idea how to fix that ?

    the component using the pipe already load another scope unfortunately.