Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Stanislav Galiant
    @stsglnt
    Hello everyone. I'm trying to implement transloco in my new nx workspace. I've tried to use scoped library extractor but it requires package.json in each library and nx cli doesn't create it . If I add it manually with i18n: [] I still see an error "package.json is missing i181n information". Would appriciate any help/hint. I'm probably missing something obvious.
    Jurien Hamaker
    @jurienhamaker

    Hello, I am trying to create a very dynamic translation like so;

    {{ 'scope.information.' + info_key | transloco: { form: form.value } }}

    Where form is an object,

    But when I try to access a subkey of the form I am returned with an empty string (I presume it's trying to find another translation key with the name):
    "scope.information.some_key": "translate {{form.name}}"

    any idea how I can use an object as variable?
    Mauro
    @Tamm_gitlab
    Does transloco locale have any option to disable locale change on langChanges event?
    I have locale implemented as a separate config, i set it with setLocale
    but since language is also initialized on app load, it overwrites it
    Itay Oded
    @itayod
    @Tamm_gitlab I dont think we currently have an option for that... but feel free to create a PR and add that to the configuration
    Itay Oded
    @itayod
    Hi @stsglnt if you library doesn't have package.json file then it is not an npm package and therefor you don't require to use the scoped library extractor...
    see the main issue it resolves is that npm packages do not support dynamic imports due to building problems which makes it hard to work with assets files, but in your case it seems like you don't need it since you don't have a separate building process to you library, so you may just work like it's the same app :)
    1 reply
    Shahar Kazaz
    @shaharkazaz

    @jurienhamaker If I understand correctly, you are trying to access a subkey inside the translation string, that won't work for you, you need to pass the value you want to display:

    {
      "scope.information.some_key": "translate {{value}}"
    }
      {{ 'scope.information.some_key' | transloco: { value: form.value.some_key } }}

    You can make it dynamic if the last part of your key is also the property name, you can also write a custom transpiler which handles objects as values.

    Pappuraj
    @pappuraj02_gitlab
    when giving defaultLang : 'en or 'es ' the particular json http request is not calling in network.
    Shahar Kazaz
    @shaharkazaz
    @pappuraj02_gitlab can you please provide some context or reproduction? :slight_smile:
    Pappuraj
    @pappuraj02_gitlab
    hi @shaharkazaz pls check above screenshots in defaultLang i given 'en' its not loding the json in application. once i select the spanish its showing the json value. likewise i gave defaultLang as 'es' its not loading the application when i select the english its coming . i did not get this issue.please give some idea.
    Shahar Kazaz
    @shaharkazaz
    @pappuraj02_gitlab Seems like a very basic use-case, can you change our sample app according to your project and send it here? as you can see this is a working example with what you need.
    David Fecke
    @leptoquark1
    Can I put HTML into params (like for a[href] in texts)?
    2 replies
    Armin Zia
    @arminzia_gitlab
    Hiya, I need help with a deployment issue. Everything works fine in development but when I deploy the app to local IIS, translations are not applied and I see the key names instead (i.e. NAVBAR.HOME). Even though the translation files are fetched without a problem. Any ideas?
    1 reply
    Ivan
    @ivan1fun
    Hello!
    What is the file for? transloco.config.js
    2 replies
    Denis Ezhov
    @DenisHedgehog
    image.png
    Hello! Is there some method to migrate from old syntax to the new syntax?
    1 reply
    David Fecke
    @leptoquark1

    I have a problem with scoped translations in the component itself. Here's my code:

    module.ts

    @NgModule({
      providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'articles' }],
    [...]

    component.ts
    [...]

      constructor(translocoService: TranslocoService) {
        this.sortItems = [
          // TODO Translation does not seem to work with the scope here
          { id: 'number', label: translocoService.translate('articles.article.number') },
          { id: 'name', label: translocoService.translate('articles.article.name') },
          { id: 'updated_at', label: translocoService.translate('articles.article.updated-at') },
        ];
        this.sortBy = this.sortItems[0];
      }
    [...]

    component.html

    [...]
        <div class="prose">
          <h2 class="headline">{{ 'articles.headline' | transloco }}</h2>
          <!-- No Problems with the scope there-->
          <h3 class="headline">{{ 'articles.article.number' | transloco }}</h3>
        </div>
    <wb-twc-dropdown-select [items]="sortItems" (itemClick)="onSorterItemClick($event)" [active]="sortBy"></wb-twc-dropdown-select>
    [...]

    No problem in the components template using the directives or pipes, but the service does not seems to be scoped in the component itself. Any obvious mistake by me?

    1 reply
    Esteban Luchsinger
    @eluchsinger
    @shaharkazaz the issue is that the xliff lib version 5.x went async.
    1 reply
    Nathaniel Peiffer
    @napei
    Is there a way I can debug the transloco directive nicely? Dealing with a component that refuses to load its content sometimes when it's surrounded by a *transloco container.
    1 reply
    Sune Radich Vestergaard
    @SuneRadich
    Is there a way to debug the language keys (and scopes) that is currently loaded?
    1 reply
    Valentine Zavrak
    @zavrakv
    Hey guys! I have a problem: when setting a scope to a component, transloco loads scoped translation twice (component is used once on the page). Is it some known bug? Can't find something similar in the issues
    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