Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    In the end I used the load. I'm not sure it's the right way to do though as it triggers load on every pipe instance (event with shareReplay).
    Patrick Zhong
    @shaharkazaz Does transloco support multiple fallback language for missing translation key and missing whole language? For example, the fallbacks are "fr-CA -> fr -> en" for language AND for missing translation keys.
    Shahar Kazaz
    @GrandSchtroumpf as the docs states, when using the synchronous translation methods (prefixed with translate) you need to make sure the translations are loaded.
    I don't think you have much of a performance issue regarding the load since it's cached, why not use selectTranslate with take(1)?
    @pookdeveloper It's a configuration file mostly used by our plugins & tools (keys manager, scoped lib extractor, etc), that's why the core functionality works without it :thumbsup:
    Shahar Kazaz
    @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
    @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
    @shaharkazaz I enter an issue for language fallbacks, please help to look at it when u are free. Thanks. ngneat/transloco#389
    Shahar Kazaz
    @zhongsp :thumbsup:
    Yaza Wainakh
    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
    @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

    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
    I miss something?
    Shahar Kazaz
    @ToledoNicola can you please provide a small reproduction? :slight_smile:
    This message was deleted
    Nicola Toledo

    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

    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
    @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
    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
    if ivy is disabled it's ok for transloco?
    Hello, I wanna set availableLangs ( in translocoConfig) from server side. Does it possible ? Thanks :)
    Shahar Kazaz
    @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
    @shaharkazaz Thankx !!
    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
    after running translation path through the toUnixFormat returns $
    well that could be changes I made, I'm looking at it
    ends up problem is likely to be related for having paths with ./ in transloco.config.js
    Hey ... how can I translate placeholder attributes for example in input-fields: <input placeholder="{{'MY_ID' | transloco}}"> <-- this does not work
    Victor Diaz

    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
    @fnuMMS try
    <div *transloco="let t; read: languageData">
    4 replies
    Shahar Kazaz
    @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
    @shaharkazaz Much appreciated!
    2 replies

    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
    Also it seems like setActiveLanguage overwrites setLocale();
    I want to keep these separate, not tied to language.
    `this.subscription = translocoService.langChanges$
        filter(lang => !!lang)
    combined with:
    if (isLocaleFormat(val)) { return val; }
    MEans it even ignores lang mapping and still overrides
    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

    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
    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.

    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(() => {
    imports: [
    providers: [MyUtilService,
    service = TestBed.inject(MyUtilService);


    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 => {
            filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
          ).subscribe(t => resolve());
        }).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

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

    export const languageMap = {
      '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(
          availableLangs: ['es', 'en'],
          defaultLang: 'es',
          fallbackLang: 'en',
    Shahar Kazaz

    @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

    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}})