'Missing locale data for the locale "zh-tw".' for pipe 'DatePipe'

[renxia]

Reproduction link

https://stackblitz.com/edit/angular-c1tw7i?file=src%2Fapp%2Fapp.module.ts

Steps to reproduce

设置语言为繁体中文，然后点击日期选择组件，则会报错

What is expected?

支持繁体中文 HK、繁体中文 TW，不会报错

What is actually happening?

datepicker 实际无法支持繁体中文的正常使用

Environment	Info
ng-zorro-antd	7.1.0
Browser	any

---

仓库只提供了 zh_TW 的繁体中文多语言配置， locale_id 为 zh-tw。
Angular 官方提供的繁体中文包括 HK 与 TW，对应的 locale_id 分别为 zh-Hant-HK 和 zh-Hant-TW。
datepicker 组件中调用的 DateHelperByDatePipe.format 方法，是通过调用 Angular 官方的 datePipe.transform 实现的，它会将 zh-tw 作为 locale_id 参数入参，于是导致报错。

建议针对 zh-Hant-HK 和 zh-Hant-TW 分别作兼容处理。

[wzhudev]

@renxia 有兴趣提交一个 PR 吗

[renxia]

@wendzhue
这里只是按照报错信息做了简单的初步分析，个人对整体逻辑还并不熟悉。
主要是实现方案，看是否需要分别对 hk 和 tw 作为两种语言处理，还是可以简单作一下兼容

[renxia]

看了一下官方的语言包，涉及汉语的细分类非常多，繁体就分别有 hk(香港)、tw(台湾)、mo(澳门)，主要区别在于币种的不同，涉及日期的都是一样的。所以可以作兼容处理，但 localeid 取决于用户到底 registerLocaleData 了哪种语言类型。

我的想法是这样的，在 NzI18nService.setLocale 方法设置第二个可选的入参 ngLocaleId，用于显示入参不同的 localeid。然后在 DateHelperByDatePipe.format 方法中优先取该 ngLocaleId 作为入参。

@wendzhue @wilsoncook

[ishowman]

ERROR
Error: InvalidPipeArgument: 'Missing locale data for the locale "zh-cn".' for pipe 'DatePipe'

the same error happens in StackBlitz demo provide in docs.
Steps:

• open the StackBlitz demo
• click "Switch language for all pickers" button to switch to Chinese
• click the first date-picker, and you can see the error message above in console
  @wendzhue @wilsoncook
  But it works well in the demo shows in docs.

[wilsoncook]

Hi @renxia @ishowman Use registerLocaleData(ngZhHantHK, 'zh_TW'); to work as your expect.
BTW: i recommend you to use DateFns as the default date formatter to get more standard and flexiable, see: https://ng.ant.design/docs/i18n/en#how-to-format-a-date-using-date-fns

[renxia]

@wilsoncook tks.
datefns 的繁体翻译没有Angular官方的细致。可正常跑起来的示例如下：

import { registerLocaleData } from '@angular/common';
import ngZhHantHK from '@angular/common/locales/zh-Hant-HK';
import { NzI18nService, zh_TW } from 'ng-zorro-antd';

export class I18NService {
  constructor(private nzI18nService: NzI18nService) {}
  setLocale() {
    registerLocaleData(ngZhHantHK, zh_TW.locale);
    this.nzI18nService.setLocale(zh_TW);
  }
}