Angular 16独立组件中matDatepicker忽略区域设置问题

问题背景 #

已在main.ts中配置区域设置为en-GB：

bootstrapApplication(AppComponent, {
    providers: [
        { provide: LOCALE_ID, useValue: 'en-GB' },
        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
        { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
        {
            provide: DateAdapter,
            useClass: MomentDateAdapter,
            deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
        },
    ],
}

但日期选择器仍显示德语，而非预期的英式英语。

已完成的排查动作 #

• 确认@angular/material-moment-adapter与@angular/material版本均为16.1.4
• 组件中注入LOCALE_ID和MAT_DATE_LOCALE并打印，结果均为'en-GB'
• 尝试在组件构造函数中主动设置区域：

  constructor(private adapter: DateAdapter<any>) {
      this.adapter.setLocale('en-GB');
  }
  

• 排除系统/浏览器语言影响：非德语环境，多浏览器（Chrome、Firefox、Edge、Brave）测试结果一致
• 项目全局搜索无DE、de-DE、de_de相关配置

解决思路 #

• 检查Moment.js本地化包引入：MomentDateAdapter依赖对应语言的Moment本地化文件，需确保在main.ts中引入en-gb包：

  import 'moment/locale/en-gb';
  

  若未引入目标语言包，Moment可能意外 fallback 到已引入的德语包。
• 校验MY_FORMATS自定义配置：检查MY_FORMATS中是否硬编码了德语的月份/星期文本，需确保使用本地化占位符（如LLLL、EEEE）而非固定字符串。
• 排查全局拦截逻辑：检查项目中是否有第三方国际化库（如ngx-translate）或自定义的DateAdapter扩展，意外覆盖了区域设置。
• 清理缓存重建项目：删除node_modules、清除包管理器缓存（npm clean cache --force或yarn cache clean），重新安装依赖后构建，避免缓存残留的旧配置。
• 手动设置Moment全局区域：在main.ts中直接初始化Moment的全局区域：

  import moment from 'moment';
  moment.locale('en-GB');
  

  确保Moment全局设置与Angular的配置同步。

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