Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    dabbid
    @dabbid
    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

    the translocoservice in turn can't resolve the keys because they are objects??
    anyone know how I can resolve this
    the lazy loaded translations are loaded fine
    (common, default, locale, meta, months & validation_errors are part of the "default" file)
    don't worry about the translation key, they both do the same
    Jurien Hamaker
    @jurienhamaker
    this is my TRANSLOCO_LOADER class:
    @Injectable({ providedIn: 'root' })
    export class TranslocoInlineLoader implements TranslocoLoader {
        getTranslation(lang: string) {
            return import(`../locales/${lang}.json`);
        }
    }
    Shahar Kazaz
    @shaharkazaz
    @jurienhamaker a small reproduction can make it easier to help you :)
    or at least provide a bit more information about your transloco config, webpack config, and an example of you json file.
    Weston
    @ronnyek
    I'd like to achieve somethign like this....
    Weston
    @ronnyek
    vaguely, that I want to have multiple apps in a nx workspace being able to load and lazily load translations from themselves, but have translations defined within the libraries so that each app isnt re-defining the translations that exist in the library
    I wanted to know if this should be possible out of box.
    Dmytro Bardai
    @dm-CaT

    I wanted to know if this should be possible out of box.

    yep.

    it's an implementation in a shared library
    Implementation in lazy loaded module: https://i.imgur.com/0c1tSao.png
    translocoLoader function: https://i.imgur.com/YSiur5w.png
    Weston
    @ronnyek
    I am also using this as a reference
    Weston
    @ronnyek
    ok, so we'd like to be able to provide multiple scopes using scopeloader from multiple modules. I've set multiple modules to provide the TRANSLOCO_SCOPE ensuring that multi:true and this seems to work. Is this something that is bad, or should this be just fine.