Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Shahar Kazaz
    @shaharkazaz
    @zhongsp If a translation file fails to load, all the keys you will try to translate will be taken from the fallback, did I understand your question correctly?
    Patrick Zhong
    @zhongsp
    @shaharkazaz I defined a custom LanguageFallbackStrategy in my app to try a set of fallback languages, e.g. fr-CA / fr / en. I think it works for a translation file fails to load.
    But, if it can load fr-CA.json, but missing a key in fr-CA.json. Does transloco can try fr-CA / fr / en for the missing translation key?
    Patrick Zhong
    @zhongsp
    @shaharkazaz I enter an issue for language fallbacks, please help to look at it when u are free. Thanks. ngneat/transloco#389
    Shahar Kazaz
    @shaharkazaz
    @zhongsp :thumbsup:
    Yaza Wainakh
    @YazaWainakh
    Hello all,
    I have a problem with translations showing in production. I have created an issue ngneat/transloco#387, but I was directed to this channel. Any idea what the problem could be?
    Already tried to use the relative path for the JSON files as mentioned as a note here.
    Shahar Kazaz
    @shaharkazaz
    @YazaWainakh have you tried following the official guide?
    if you start a new project and install the library using the schematics do you still have issues? try it and see what's the difference.
    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-29 alle 16.56.46.png

    hi everyone, i hava. a problem, i can't get the translation in the scope 'countries'

    the default language is 'it' so should get countries/it.json right?

    i use nx

    i tried also with inject the
    providers: [ { provide: TRANSLOCO_SCOPE, useValue: 'countries', }, ],

    inside the component and use the translate method but don't work 😕

    Nicola Toledo
    @ToledoNicola
    I miss something?
    Shahar Kazaz
    @shaharkazaz
    @ToledoNicola can you please provide a small reproduction? :slight_smile:
    This message was deleted
    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-31 alle 13.03.26.png

    hi @shaharkazaz thanks for reply, ok is a little bit difficult but i will try

    can be some problem in the scope or the lazy route?
    this is the global configuration

    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-31 alle 13.06.37.png

    and this is the import in the app.module

    and then inside my lib in the component i just override the TRANSLOCO_SCOPE with the scope name

    Yaza Wainakh
    @YazaWainakh
    @shaharkazaz it worked in my project when I removed the AOT flatting configuration,
    The translations that are not nested appear correctly, but the nested ones only show the translation key, any ideas why?
    flatten: {
              aot: environment.production,
            }
    Yaza Wainakh
    @YazaWainakh
    I have another general question, why does getTranslation uses an http request and not just import the files and return them as :
    import de from '@assets/i18n/de.json'
    import en from '@assets/i18n/en.json'
    
    export class TranslocoHttpLoader implements TranslocoLoader {
      constructor() {}
      getTranslation(lang: string): Observable<Translation> {
        return lang === 'de' ? of(de) : of(en)
      }
    }
    Nicola Toledo
    @ToledoNicola
    if ivy is disabled it's ok for transloco?
    tipyaf
    @tipyaf
    Hello, I wanna set availableLangs ( in translocoConfig) from server side. Does it possible ? Thanks :)
    Shahar Kazaz
    @shaharkazaz
    @YazaWainakh if you implement them like that you get both the translations bundled even if not both are used, but if it suits your needs use it like that, that's one of the fun things about building a hackable library :muscle:
    Regarding the flattening, it's kind of hard answering this question since it's very general and I don't see usage examples, please provide a small reproduction so we can try and help :slight_smile:
    @ToledoNicola You can use transloco with View Engine :thumbsup:
    @tipyaf yes you can, use the setAvailableLangs method
    tipyaf
    @tipyaf
    @shaharkazaz Thankx !!
    Weston
    @ronnyek
    we're running into a problem running transloco-keys-manager in a linux environment... we're seeing:
    Checking for missing keys ✨Cannot read property 'split' of undefined
    this is a version that is recent enough to include a bug fix for that was more than 1yr old
    I am seeing the following arguemtns getting passed into getScopeAndLangFromFullPath.js
    filePath: /home/agent/_work/4/s/apps/frontend/src/assets/i18n/ar.json
    translationPath: /home/agent/_work/4/s/apps/frontend/src/assets/i18n
    Weston
    @ronnyek
    after running translation path through the toUnixFormat returns $
    Weston
    @ronnyek
    well that could be changes I made, I'm looking at it
    Weston
    @ronnyek
    ends up problem is likely to be related for having paths with ./ in transloco.config.js
    fnuMMS
    @fnuMMS
    Hey ... how can I translate placeholder attributes for example in input-fields: <input placeholder="{{'MY_ID' | transloco}}"> <-- this does not work
    Victor Diaz
    @vdiaz1130

    Hello. I'm having trouble loading lang files in a nested component hosted in lazy module. For some reason it only loads on the second time the component is initialized. Repo here... https://github.com/vdiaz1130/transloco-nx

    Appreciate the help.

    Victor Diaz
    @vdiaz1130
    @fnuMMS try
    <div *transloco="let t; read: languageData">
      <input
        type="text"
        [placeholder]="t('inputPlaceHolder')"
      />
    </div>
    4 replies
    Shahar Kazaz
    @shaharkazaz
    @fnuMMS, as @vdiaz1130 showed, the issue is that you need to bind the placeholder. Otherwise, you are just assigning it with the string value of the expression.
    @vdiaz1130 I'll take a look when I get the change :slight_smile: (can't promise when)
    Victor Diaz
    @vdiaz1130
    @shaharkazaz Much appreciated!
    2 replies
    Mauro
    @Tamm_gitlab

    Does transloco locale have a way to set timezone globally, like setLocale()?

    Having to pass it to the service etc every time you use it feels wrong (since you now also have to subscribe to some service you fetch the set timezone from).

    and the token in provider cannot be updated during runtime
    Mauro
    @Tamm_gitlab
    Also it seems like setActiveLanguage overwrites setLocale();
    I want to keep these separate, not tied to language.
    Mauro
    @Tamm_gitlab
    `this.subscription = translocoService.langChanges$
      .pipe(
        map(this.toLocale.bind(this)),
        filter(lang => !!lang)
      )
      .subscribe(this.setLocale.bind(this));`
    combined with:
    if (isLocaleFormat(val)) { return val; }
    MEans it even ignores lang mapping and still overrides
    Brian
    @seadonk
    I upgraded to the latest transloco (^2.17.2) and transloco keys manager (2.0.0). I noticed that the keys manager find/extract commands no longer seem to find anything in the .html files. Any ideas?
    6 replies
    Tom Wieschalla
    @gastdozent91

    Hey there Transloco-Team,

    we got an Angular-App with an integrated login process (login without translation). We added Transloco's RootModule in our AppModule (like described here) without a default language (because we want the persisted user language to be the default one) -> so Transloco is bootstrapping with his default language 'en'. Additionally after a succesfull login we load the persisted user language from our backend server like described in your recipe "Prefetch the User Language" with the TranslocoService.

    1. Is this the right way to fetch a language during runtime?
    2. After "prefetching" the persisted user language (e.g. 'de') the default language 'en' is loaded too when we use a transloco pipe in a html-file the first time. Is there a possibility to prevent the default-language-loading?
    3. Is there a way to integrate the TranslocoRootModule in another Module (e.g. a RoutingModule which is loaded after the login process successfully pass)?

    thanks in advance!

    Itay Oded
    @itayod
    Hi @gastdozent91
    1. It is about what fit you best, prefetching the user language, means that the transactions will preload before the application is up so all the transactions can be used synchronously.
    2. That happens since you didn't set the default language, if you getting the user's lang from your backend you might need to set it using APP_INITIALIZER.
    3. Not sure how your app is built, but basically there should bee one TranslocoRootModule per application.
    Sravan
    @shravansofts

    Hi
    can someone help how to do the unit testing while using transoloco.translate() in typescript?
    https://ngneat.github.io/transloco/docs/unit-testing this works while using pipe/directive on html dom.
    When I have a utility function like below in my service.:
    public getFormattedCapacity(val: number): string {
    let result: string = "";
    if (typeof val == 'number') {
    if (val >= this.TBYTE) {
    result = (val / this.TBYTE).toFixed(2) + " " + this.transloco.translate('terabyte');
    } else if (val >= this.GBYTE) {
    result = (val / this.GBYTE).toFixed(2) + " " + this.transloco.translate('gigabyte');
    } else if (val >= this.MBYTE) {
    result = (val / this.MBYTE).toFixed(2) + " " + this.transloco.translate('megabyte');
    } else if (val >= this.KBYTE) {
    result = (val / this.KBYTE).toFixed(2) + " " + this.transloco.translate('kilobyte');
    } else if (val >= 0) {
    result = val + " " + this.transloco.translate('byte');
    } else {
    result = this.transloco.translate('notapplicable');
    }
    }
    return result;
    }
    }

    when im writing unit testing:
    it("Should return capacity in terms of KB when call method getFormattedCapacity", () => {
    let value = service.getFormattedCapacity(1024);
    expect(value).toBe("1.00 kilobyte"); // asserting to true. I mean returning key but not value

       expect(value).toBe("1.00 KB");  //Intension/expected assertion behavior
    });

    Here is the beforeeach looks:
    beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
    imports: [
    SharedModule,
    TranslocoTestingModule,
    getTranslocoModule()
    ],
    providers: [MyUtilService,
    GlobalService,
    TranslocoService
    ]
    });
    service = TestBed.inject(MyUtilService);
    }));

    Brian
    @seadonk

    @shravansofts
    The Translate function does not wait for the translations to load. You have to preload them. You can check out the TranslocoPreloadLangsModule, or you can just setActiveLang in your beforeEach and wait for it to actually load. When possible, try to use selectTranslate instead, since it will produce an observable that changes every time the translations are loaded.

    We had a similar situation before, I've quoted the previous thread below.

    @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
        }
      );
    }
    Shahar Kazaz
    @shaharkazaz

    @shravansofts @brian
    The reason this is working for you while using the directive or pipe is that we take of it behind the scenes, when you use the service it's your responsibility.

    This behavior doesn't make sense while testing, that's why in v2.20.0 we introduced the preloadLangs property in the testing module config, which tells transloco to preload the languages into the service.

    I updated the docs with the property since it was missing and this question was raised several times, even recently: ngneat/transloco#400.

    There is more information regarding this change here.

    Victor Diaz
    @vdiaz1130

    Hello, can you provide a usage example of the upcase customFormatter. https://www.npmjs.com/package/@ngneat/transloco-messageformat

    I tried the example but nothing I've used in the JSON file works: {{itemName | upcase}}, {{itemName, upcase}}, {itemName | upcase}, {itemName, upcase}. I also reversed them (e.g {{upcase itemName}})

    Brian
    @seadonk
    Recently, I noticed that my tests started complaining about missing providers for various constants from TranslocoLocale. Is there something different I need to start doing in my unit tests? For now, I have to provide each one of these for the tests to pass.
    { provide: LOCALE_CURRENCY_MAPPING, useValue: {} },
    { provide: LOCALE_LANG_MAPPING, useValue: {} },
    { provide: LOCALE_DEFAULT_LOCALE, useValue: 'en-US' },
    { provide: LOCALE_CONFIG, useValue: {} },
    { provide: TRANSLOCO_NUMBER_TRANSFORMER, useValue: {} },
    { provide: TRANSLOCO_DATE_TRANSFORMER, useValue: {} }
    Brian
    @seadonk
    thanks @shaharkazaz , the preloadLangs property has already fixed translations in several unit tests for me.
    Itay Oded
    @itayod

    Recently, I noticed that my tests started complaining about missing providers for various constants from TranslocoLocale. Is there something different I need to start doing in my unit tests? For now, I have to provide each one of these for the tests to pass.

    { provide: LOCALE_CURRENCY_MAPPING, useValue: {} },
    { provide: LOCALE_LANG_MAPPING, useValue: {} },
    { provide: LOCALE_DEFAULT_LOCALE, useValue: 'en-US' },
    { provide: LOCALE_CONFIG, useValue: {} },
    { provide: TRANSLOCO_NUMBER_TRANSFORMER, useValue: {} },
    { provide: TRANSLOCO_DATE_TRANSFORMER, useValue: {} }

    What exactly are you testing? it seems redundant to fake all these providers in unit tests ( usually you need to fake just what you are using e.g. pipe, directive, etc... ). I suggest you take a look at spectator as a good practice library for testing, there are many use-cases there that might suit your need.

    Brian
    @seadonk
    @itayod I am using spectator. I am not testing any l10n features, but these errors started appearing in my tests. My app does use translocolocale.