feat(transloco): 🎸 allow to omit available languages

Currently the available languages need to be set, otherwise the
translated values won't be returned. With this change, the translation
will also work when omitting the availableLangs config, or setting it to
null.

✅ Closes: jsverse#653

docs/docs/getting-started/config-options.mdx

@@ -60,6 +60,8 @@ translocoConfig({
  availableLangs: ['en', 'es']
 })
 ```
+When the active language is not included in the `availableLangs`, the translations of this language will not be returned.
+You can omit this option or set it to `null`, in this case the translations will be returned for any language, if available.
 
 ### `missingHandler.allowEmpty`
 Whether to allow empty values: (defaults to `false`)

libs/transloco/src/lib/tests/service/translate.spec.ts

@@ -79,4 +79,16 @@ describe('translate', () => {
  'Admin Lazy spanish'
  );
  }));
+
+ it('should return the translation when availableLangs is skipped', fakeAsync(() => {
+ service.setAvailableLangs(undefined);
+ loadLang(service);
+ expect(service.translate('home')).toEqual(mockLangs['en'].home);
+ }));
+
+ it('should return the translation when availableLangs is set to null', fakeAsync(() => {
+ service.setAvailableLangs(null);
+ loadLang(service);
+ expect(service.translate('home')).toEqual(mockLangs['en'].home);
+ }));
 });

libs/transloco/src/lib/transloco.config.ts

@@ -8,7 +8,7 @@ export interface TranslocoConfig {
  prodMode: boolean;
  fallbackLang?: string | string[];
  failedRetries: number;
- availableLangs: AvailableLangs;
+ availableLangs?: AvailableLangs;
  flatten: {
  aot: boolean;
  };

libs/transloco/src/lib/transloco.service.ts

@@ -102,7 +102,7 @@ export class TranslocoService implements OnDestroy {
  private cache = new Map<string, Observable<Translation>>();
  private firstFallbackLang: string | undefined;
  private defaultLang = '';
- private availableLangs: AvailableLangs = [];
+ private availableLangs?: AvailableLangs;
  private isResolvedMissingOnce = false;
  private lang: BehaviorSubject<string>;
  private failedLangs = new Set<string>();
@@ -129,7 +129,7 @@ export class TranslocoService implements OnDestroy {
  service = this;
  this.config = structuredClone(userConfig);
 
- this.setAvailableLangs(this.config.availableLangs || []);
+ this.setAvailableLangs(this.config.availableLangs);
  this.setFallbackLangForMissingTranslation(this.config);
  this.setDefaultLang(this.config.defaultLang);
  this.lang = new BehaviorSubject<string>(this.getDefaultLang());
@@ -169,7 +169,7 @@ export class TranslocoService implements OnDestroy {
  return this;
  }
 
- setAvailableLangs(langs: AvailableLangs) {
+ setAvailableLangs(langs: AvailableLangs | undefined) {
  this.availableLangs = langs;
  }
 
@@ -181,7 +181,7 @@ export class TranslocoService implements OnDestroy {
  * depending on how the available languages are set in your module.
  */
  getAvailableLangs() {
- return this.availableLangs;
+ return this.availableLangs ?? [];
  }
 
  load(path: string, options: LoadOptions = {}): Observable<Translation> {
@@ -626,7 +626,11 @@ export class TranslocoService implements OnDestroy {
  * @internal
  */
  _isLangScoped(lang: string) {
- return this.getAvailableLangsIds().indexOf(lang) === -1;
+ const availableLangsIds = this.getAvailableLangsIds();
+ if (!availableLangsIds) {
+ return true;
+ }
+ return availableLangsIds.indexOf(lang) === -1;
  }
 
  /**
@@ -636,7 +640,11 @@ export class TranslocoService implements OnDestroy {
  * False if the given string is not an available language.
  */
  isLang(lang: string): boolean {
- return this.getAvailableLangsIds().indexOf(lang) !== -1;
+ const availableLangsIds = this.getAvailableLangsIds();
+ if (!availableLangsIds) {
+ return true;
+ }
+ return availableLangsIds.indexOf(lang) !== -1;
  }
 
  /**
@@ -701,8 +709,12 @@ export class TranslocoService implements OnDestroy {
  return size(this.getTranslation(lang));
  }
 
- private getAvailableLangsIds(): string[] {
- const first = this.getAvailableLangs()[0];
+ private getAvailableLangsIds(): string[] | null {
+ const first = this.getAvailableLangs()?.[0];
+
+ if (isNil(first)) {
+ return null;
+ }
 
  if (isString(first)) {
  return this.getAvailableLangs() as string[];

libs/transloco/src/lib/types.ts

@@ -30,7 +30,7 @@ export interface LangDefinition {
  id: string;
  label: string;
 }
-export type AvailableLangs = string[] | LangDefinition[];
+export type AvailableLangs = string[] | LangDefinition[] | null;
 export interface SetTranslationOptions {
  merge?: boolean;
  emitChange?: boolean;