使用moment.js修改应用本地化日期格式时遇导出成员报错求助

这个坑我之前帮好几个Angular开发者踩过，本质是Moment.js的ES模块导出逻辑在新版本里有变化，和Angular的TypeScript配置没匹配上导致的。咱们一步步来解决：

错误原因分析 #

你现在用的导入方式是早期Angular Material文档里推荐的写法，但Moment.js在后续版本中调整了导出方式——不再提供default导出，而是用命名导出或者整体导出，所以TypeScript会报错找不到default成员。

解决方案 #

1. 先确认依赖安装完整 #

首先确保你已经装了Moment和它的TypeScript类型定义：

npm install moment @types/moment --save

2. 修正导入代码（两种可选方案） #

方案一：直接整体导入（推荐）

把原来的导入代码改成下面这样，不需要再处理_rollupMoment那部分逻辑：

import { Inject, Injectable, Optional } from '@angular/core';
import { DateAdapter, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material';
import * as moment from 'moment';
import { Moment } from 'moment';

// 直接使用moment对象即可，比如设置本地化语言
moment.locale('zh-cn'); // 替换成你需要的语言标识

方案二：开启TypeScript的兼容配置

如果你更习惯用默认导入的写法（import moment from 'moment'），可以修改项目根目录下的tsconfig.json，在compilerOptions里添加两个配置：

{
  "compilerOptions": {
    // 保留你原来的其他配置
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

然后导入代码就可以写成：

import moment from 'moment';
import { Moment } from 'moment';

3. 适配Angular Material的DateAdapter（示例） #

如果是为了自定义Angular Material的日期适配器，你可以参考下面的写法：

@Injectable()
export class CustomMomentDateAdapter extends DateAdapter<Moment> {
  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
    moment.locale(dateLocale || 'en-US');
  }

  override parse(value: any, parseFormat: string | string[]): Moment | null {
    if (value && typeof value === 'string') {
      return moment(value, parseFormat);
    }
    return value ? moment(value) : null;
  }

  // 按需重写format、getYear等其他方法...
}

这样调整后，导入错误应该就消失了，你就能正常用Moment.js处理本地化日期格式啦。

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