[Question]: Registering custom locale data file for L10N (Dates)

[gunnarburmeister]

I want to support a couple different locales in my project (only for l10n, i18n would use the same base language), one of them actually being basically a custom one. I register them using registerLocalData. Currently I have a custom pipe to localize dates (it pulls the language from my language settings service which also feeds into TranslocoService/TranslocoLocaleService), but I would like to switch to using translocoDate pipe.

The problem I'm facing is that I can't seem to get the TranslocoLocaleService to pick up the custom locale data.

For testing I changed them to be distinguishable:

// assets/locales/...

// de-DE.json
export const locale_de_DE = [
  'de-DE',
  ...
  ['dd:MM:yyyy', 'dd:MM:yyyy', 'dd:MM:yyyy', 'EEEE, d. MMMM y'],
  ...
];

// en-DE.json
export const locale_en_DE = [
  'en-DE',
  ...
  ['dd~MM~yyyy', 'dd~MM~yyyy', 'dd~MM~yyyy', 'EEEE, dd.MM.yyyy'],
  ...
];

// en-GB.json
export const locale_en_GB = [
  'en-GB',
  ...
  ['dd#MM#yyyy', 'dd#MM#yyyy', 'dd#MM#yyyy', 'EEEE, d MMMM y'],
  ...
];

// en-US.json
export const locale_en_US = [
  'en-US',
  ...
  ['MM,dd,yyyy', 'MM,dd,yyyy', 'MM,dd,yyyy', 'EEEE, MMMM d, y'],
  ...
];

Using my localeDate pipe vs translocoDate pipe:

{{ myDate | localeDate: 'medium' }}
{{ myDate | translocoDate: { dateStyle: 'medium', timeStyle: 'medium', timeZone: 'UTC' } }}

myDate = 2022-07-05T14:34:56.000Z

Outputs:
de-DE
05:07:2022, 14:34:56
05.07.2022, 14:34:56

en-DE
05~07~2022, 14:34:56
5 Jul 2022, 14:34:56

en-GB
05#07#2022, 14:34:56
5 Jul 2022, 14:34:56

en-US
07,05,2022, 2:34:56 PM
Jul 5, 2022, 2:34:56 PM

It's not even consistent for the en-DE (which doesn't really exist, so it should fall back to en-US I thought).

Is it not possible to provide custom locale data with registerLocalData for translocoDate etc?

I can add more implementation details if needed, but I left them out for now since my pipe is working so the locale data should be loaded correctly.

[gunnarburmeister]

Ok, in the end I resorted to using a custom transformer with a little bit of mapping and then using formatDate from angular/common like I had done in my custom pipe.

import { formatDate } from '@angular/common';
import { DateUtils } from '@core/utility';
import { DateFormatOptions, TranslocoDateTransformer } from '@ngneat/transloco-locale';

export class CustomDateTransformer implements TranslocoDateTransformer {
  transform(date: Date, locale: string, options: DateFormatOptions): string {
    if (DateUtils.isDate(date)) {
      let format: string = 'mediumDate';

      if(options.dateStyle && options.timeStyle) format = options.dateStyle;
      else if(options.dateStyle) format = `${options.dateStyle}Date`;
      else if(options.timeStyle) format = `${options.timeStyle}Time`;

      let timeZone: string | undefined = options.timeZone === 'UTC' ? 'UTC' : undefined;

      return formatDate(date, format, locale, timeZone);
    }

    return '';
  }
}