Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    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
    translationPath: /home/agent/_work/4/s/apps/frontend/src/assets/i18n
    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}})

    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: {} }
    thanks @shaharkazaz , the preloadLangs property has already fixed translations in several unit tests for me.
    Itay Oded

    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.

    @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.
    Sune Radich Vestergaard
    I have a lazy loaded feature module with a scopeloader - but then also an eager loaded module used by the lazy loaded feature. The eager loaded module is a series of ngrx effects that handle opening error modals. So I am not able to add a component level provider, as I only ever dispath an event with the language keys as parameters. Is it possible to add a scope at runtime somehow?
    1 reply

    Hello, is there a way to use a scope with the translation API ?
    I would like to do something like that inside a lazy route component using the scope "product".


    The code tries to load it from the root i18n file instead of "product" scope
    I also tried:

    transloco.translate('step.optional', {}, 'product');

    Which extract in the right file, but doesn't use the scope for translation

    6 replies

    I'm having trouble testing anything that uses TranslocoLocale pipes in a service.

    TranslocoLocale pipes in my component templates work correctly in unit tests, but if I inject the pipes in a service, injected in the constructor, they do not work. How should I setup my tests for this?

    In the example below, My service uses the TranslocoDecimalPipe. In my test I get the error:

    NullInjectorError: StaticInjectorError(DynamicTestModule)[L10nTestService -> TranslocoDecimalPipe]: 
      StaticInjectorError(Platform: core)[L10nTestService -> TranslocoDecimalPipe]: 
        NullInjectorError: No provider for TranslocoDecimalPipe!
    import { Injectable } from '@angular/core';
    import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest';
    import { TranslocoModule } from '@ngneat/transloco';
    import { TranslocoDecimalPipe, TranslocoLocaleModule } from '@ngneat/transloco-locale';
    @Injectable({ providedIn: 'root' })
    class L10nTestService {
      decimalValue: string;
      constructor(private translocoDecimalPipe: TranslocoDecimalPipe) {
        this.decimalValue = translocoDecimalPipe.transform(1234567890.123456);
    describe('L10ntestService', () => {
      let spectator: SpectatorService<L10nTestService>;
      const createService = createServiceFactory<L10nTestService>({
        service: L10nTestService,
        imports: [
      beforeEach(() => spectator = createService());
      it('decimal value should be transformed', () => {
    5 replies