Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Nathaniel Peiffer
    @napei
    Oh. All I had to do was scroll up and someone else solved it. Stupid me. for reference from(import('../path/to/i18n/lang.json')).pipe(pluck('default')) works great :)
    Nacho Vazquez
    @NachoVazquez

    Hello everyone!

    Is there any Spectator chat room out there?

    Patka Zsolt-AndrĂ¡s
    @andraspatka

    Hi everyone! I have a question about line breaks. The text that needs to be internationalized is pretty long, so it would be nice if I could insert some line breaks into it. Unfortunately \n seems to not function as expected. Is there another way to insert line breaks? Am I doing something wrong?
    I've tried the following:

    "label.try1": "Text that is very long, needs a line break.\nThis text should go to the next line"
    "label.try2": "Text that is very long, needs a line break.\n This text should go to the next line"

    The \n is not displayed, so it gets processed somehow, but the line break is not displayed.
    Thanks in advance!

    Shahar Kazaz
    @shaharkazaz
    @ejthan Can you provide a small reproduction?
    @alexander.kainzinger_gitlab tried to reproduce but no luck it should work as expected. if you do provide a reproduction we can work on, ping me :pray:
    @redrick-tmn I would prefer using the HTML inside the json.
    @danielehrhardt are you using the structural directive? there is a loading property where you can pass a loading template
    @s4m0r4m4 have you seen this blog post?
    @NachoVazquez currently there isn't :)
    @andraspatka you can add <br> and use it inside a innerHTML binding
    Andrey
    @Dedrus
    Hi everyone! Small question - can I reload translation files? For example I want to refetch translations every 4 hours in desktop (just an example, not real logic). translocoService.load("lang") will not reload, because it have caching inside. How I can achieve that?
    Shahar Kazaz
    @shaharkazaz
    @Dedrus not at the moment, but what's the use case?
    Andrey
    @Dedrus
    @shaharkazaz I developing desktop electron and currently we are bundling i18n files with release. But we want to switch loader to use cloud files, I got the idea that we can refetch translations during runtime, but I've looked at the source code already and recognized that it's not supported. Well I think this feature is not needed, it's very confusing for user that text can change during runtime.
    Raziel
    @rraziel
    So you're saying it's better if it's not supported? heheh
    Torben Bang
    @tobang
    How would one get localized month and day names in Transloco?
    Raziel
    @rraziel
    transloco-locale or just Intl.*
    Torben Bang
    @tobang
    I mean programmatically via a service. Like getLocaleMonthNames and getLocaleDayNames in angular/common
    Raziel
    @rraziel
    Looking at the source, probably translocoLocaleService.localizeDate()
    Torben Bang
    @tobang
    I was more thinking of a function that could return the month names and weekday names of the active language. But maybe that is not possible.
    Raziel
    @rraziel
    It is, but transloco-locale is really just a small wrapper around Intl.* functions
    You could always just do
    class MyLocaleUtils {
      constructor(private readonly translocoLocaleService: TranslocoLocaleService) {}
      getMonthName(month: number): string {
        return this.translocoLocaleService.localizeDate(new Date(2020, month, 1));
      }
    }
    + the format options I guess
    In the end it's still just:
    Torben Bang
    @tobang
    Ah, I see, thank you
    dabbid
    @dabbid
    Hello all, I'm working on i18n of a lib, I'm getting this error when I build in AOT:
    [error] RangeError: Maximum call stack size exceeded
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:404:59)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
        at MetadataBundler.convertValue (/home/dav/Airbus/fret-ngx-file-uploader/node_modules/@angular/compiler-cli/src/metadata/bundler.js:422:36)
    versions are angular 8.2.2, transloco 2.19.1, ng-packagr 5.4.3
    dabbid
    @dabbid
    Logging @angular/compiler-cli/src/metadata/bundler.js, it seems I have a circular dependency as it logs my lib's module name over and over until it crashes
    dabbid
    @dabbid
    Ok, it's due to the fact that lambda are not supported, so here's a quick fix for Inline Loaders example in doc (the // @dynamic annotation):
    export const loader = ['en', 'es'].reduce((acc, lang) => {
      acc[lang] = () => import(`../i18n/${lang}.json`);
      return acc;
    }, {});
    
    // @dynamic
    @NgModule({
      imports: [TranslocoModule],
      providers: [
        {
          provide: TRANSLOCO_SCOPE,
          useValue: {
            scope: 'scopeName',
            loader
          }
        }
      ],
      declarations: [YourComponent],
      exports: [YourComponent]
    })
    export class FeatureModule {}
    dabbid
    @dabbid
    More robust fix:
    export function translocoLoaderFactory(): ProviderScope {
      const loader = ['en', 'es'].reduce((acc, lang) => {
        acc[lang] = () => import(`../i18n/${lang}.json`);
        return acc;
      }, {});
      return {
        loader,
        scope: 'scopeName',
      };
    }
    
    @NgModule({
      imports: [TranslocoModule],
      providers: [
        {
          provide: TRANSLOCO_SCOPE,
          useFactory: translocoLoaderFactory
        }
      ],
      declarations: [YourComponent],
      exports: [YourComponent]
    })
    export class FeatureModule {}
    kmathy
    @kmathyPRO_gitlab

    Hi everyone!

    Hope you're all fine :)

    Well, I have a weird issue... I'm not able to make the CLI work with multiple sub_directories to "merge" translations files into one file

    image.png
    Here is the architecture I want to achieve
    image.png
    And my transloco.config.js
    image.png
    It says: Nothing to be done
    Anyone has an idea of the problem?
    kmathy
    @kmathyPRO_gitlab
    Tested on a new fresh project, that's weird
    kmathy
    @kmathyPRO_gitlab
    Found the problem... I had to include the --include-defaultLang in the command to make it work ;) That's a bit confusing...
    dabbid
    @dabbid

    Hello again, how do you test a component which declares its transloco scope in its providers? I'm facing an issue when unit testing my library's component, I've got something like this:

    import {
      Component,
      DebugElement,
      EventEmitter,
      HostBinding,
      HostListener,
      Input,
      Output,
      ViewChild,
    } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    import { ThemePalette } from '@angular/material/core';
    import { ProviderScope, TRANSLOCO_SCOPE } from '@ngneat/transloco';
    import { fromEvent, zip } from 'rxjs';
    import { map } from 'rxjs/operators';
    
    import { ReadAs } from './file-uploader.model';
    
    export function translocoScopeFactory(): ProviderScope {
      const loader = ['en', 'fr'].reduce((acc, lang) => {
        acc[lang] = () => import(`../assets/i18n/${lang}.json`);
        return acc;
      }, {});
      return {
        loader,
        scope: 'fret-file-uploader',
      };
    }
    
    @Component({
      selector: 'fret-file-uploader',
      templateUrl: './file-uploader.component.html',
      styleUrls: ['./file-uploader.component.scss'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: FileUploaderComponent,
          multi: true,
        },
        {
          provide: TRANSLOCO_SCOPE,
          useFactory: translocoScopeFactory,
        },
      ],
    })
    export class FileUploaderComponent implements ControlValueAccessor {

    In spec file, I init test bed like this:

    // transloco.module.spec.ts
    import { ModuleWithProviders } from '@angular/core';
    import { TranslocoTestingModule, TranslocoConfig } from '@ngneat/transloco';
    
    import en from '../../../projects/fret-ngx/file-uploader/src/assets/i18n/en.json';
    import fr from '../../../projects/fret-ngx/file-uploader/src/assets/i18n/fr.json';
    
    export function getTranslocoModule(config: Partial<TranslocoConfig> = null): ModuleWithProviders {
      return TranslocoTestingModule.withLangs(
        { 'fret-file-uploader/en': en, 'fret-file-uploader/fr': fr },
        {
          availableLangs: ['en', 'fr'],
          defaultLang: 'en',
          ...config,
        }
      );
    }
    
    // file-uploader.component.spec.ts
    TestBed.configureTestingModule({
      declarations: [
        MockDirective(MatTooltip),
        FileUploaderComponent,
        MockPipes(FileSizeRestrictionPipe, FileTypeRestrictionPipe),
      ],
      imports: [
        CommonModule,
        FormsModule,
        MatButtonModule,
        MatIconModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        NoopAnimationsModule,
        ReactiveFormsModule,
        getTranslocoModule(),
        TranslocoMessageFormatModule.init(),
      ],
      providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'fret-file-uploader' }],
    })

    But I've got a Error: Expected '' to be 'Import file', and when I log what's happening in the transloco pipe, I see that the appropriate translation file is loaded after my expect assertion where I test that my label is the one in translation file.
    Could you help?

    dabbid
    @dabbid
    I've tested to move the transloco scope provider in my library's module, if I do that unit tests pass, but when I import my library into a brand new project, then translations don't get loaded, and so only translation keys are displayed in my lib. While moving transloco provider in library's component's providers leads to the exact opposite: unit tests go wrong, but texts get translated successfully when lib is imported in a project (kind of complicated to describe, sorry I'm french)
    dabbid
    @dabbid
    No one can help?
    dabbid
    @dabbid

    Ok, I've found a solution reading angular/angular#10727 (this answer especially):

    // file-uploader.component.spec.ts
    TestBed.configureTestingModule({
      declarations: [
        MockDirective(MatTooltip),
        FileUploaderComponent,
        MockPipes(FileSizeRestrictionPipe, FileTypeRestrictionPipe),
      ],
      imports: [
        CommonModule,
        FormsModule,
        MatButtonModule,
        MatIconModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        NoopAnimationsModule,
        ReactiveFormsModule,
        getTranslocoModule(),
        TranslocoMessageFormatModule.init(),
      ],
    }).overrideComponent(FileUploaderComponent, {
      set: {
        providers: [
          {
            provide: NG_VALUE_ACCESSOR,
            useExisting: FileUploaderComponent,
            multi: true,
          },
          { provide: TRANSLOCO_SCOPE, useValue: 'fret-file-uploader' },
        ],
      },
    });

    Hope it could help someone...

    Shahar Kazaz
    @shaharkazaz
    @dabbid glad you were able to resolve your issue
    keep in mind that it might take some time for people to respond :)
    dabbid
    @dabbid
    Yeah no problem, I guess people here are already very busy on their side too
    Raziel
    @rraziel
    I'm just playing videogames all day long
    dabbid
    @dabbid
    Me too, but sometime my boss enters my office without warning to give me some work :grinning:
    Raziel
    @rraziel
    image.png
    Shahar Kazaz
    @shaharkazaz
    :joy:
    Jurien Hamaker
    @jurienhamaker
    Hello Hello
    Is this where I can look for some support?
    Lodewijk Wensveen
    @lwensveen
    @rraziel :')
    Jurien Hamaker
    @jurienhamaker
    image.png

    On the left is a production build using inline loader class and on the right is the local build.

    I am using webpack's import to load the json files inline. But somehow the default nl/en.jsons are loaded as a object in production