Angular设置LOCALE_ID为en-NZ后Date Pipe短日期仍按en-US格式化问题

Angular 默认仅内置了 en-US 区域的格式化规则，即便你通过 LOCALE_ID 指定了其他区域标识，只要没有提前注册对应区域的配置数据，Angular 会自动降级使用 en-US 规则，这也是你看到日期格式为月/日/年（符合en-US规则）而非预期日/月/年（符合en-NZ规则）的核心原因。

• 第一步：在根模块（通常是 app.module.ts）或者全局配置文件中注册 en-NZ 区域数据

import { registerLocaleData } from '@angular/common';
import localeEnNz from '@angular/common/locales/en-NZ';

// 注册en-NZ区域配置
registerLocaleData(localeEnNz);

• 第二步：验证你的 LocaleService 返回的区域值是否正确，可通过工厂函数加日志确认

{
  provide: LOCALE_ID,
  deps: [LocaleService],
  useFactory: (localeService: { locale: string }) => {
    // 确认此处输出为 en-NZ，若返回值错误需检查LocaleService的逻辑
    console.log('当前区域标识：', localeService.locale);
    return localeService.locale;
  }
}

• 第三步：如果使用Angular 14+的独立组件/独立应用架构，需要把上述LOCALE_ID的提供逻辑放到全局 app.config.ts 的 providers 数组中，避免组件内使用DatePipe时取不到全局配置。

你可以通过以下代码快速验证配置是否生效：
组件内定义测试日期：

// 对应日期为2021年9月6日，月份从0开始计数，8代表9月
testDate = new Date(2021, 8, 6);

模板中使用DatePipe格式化：

{{ testDate | date:'shortDate' }}

配置生效后输出应为预期的 6/9/21。

内容的提问来源于stack exchange，提问作者Joe