Angular 15升级至16后ngxdaterangepickermd出现函数调用错误

我在Angular项目中使用ngx-daterangepicker-material实现日期范围选择器，将Angular从15版本升级至16后，使用该组件时控制台出现以下错误：

TypeError: calendar[row][col].isoWeekday is not a function

以及

typeerror: calendar[row][col].weekday is not a function

搜索后未找到解决方案，怀疑是否存在依赖版本升级过度或不足的问题，以下是我的package.json内容：

{
  "dependencies": {
    "@angular-devkit/architect": "^0.1602.16",
    "@angular-devkit/core": "^16.2.16",
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/localize": "^16.2.12",
    "@angular/material": "^16.2.14",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/platform-server": "^16.2.12",
    "@angular/pwa": "^0.800.1",
    "@angular/router": "^16.2.12",
    "@angular/service-worker": "^16.2.12",
    "@kolkov/angular-editor": "^3.0.0-beta.0",
    "@microsoft/signalr": "^8.0.7",
    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
    "@ng-select/ng-select": "^11.2.0",
    "@ngrx/effects": "^16.3.0",
    "@ngrx/router-store": "^16.3.0",
    "@ngrx/store": "^16.3.0",
    "@ngrx/store-devtools": "^16.3.0",
    "@types/jquery": "^3.5.32",
    "acorn": "^6.1.1",
    "angular-froala-wysiwyg": "^4.3.0",
    "angular-oauth2-oidc": "^16.0.0",
    "bootstrap": "^4.3.1",
    "browserify-shim": "^3.8.14",
    "core-js": "^3.1.3",
    "crypto-js": "^4.2.0",
    "exceljs": "^4.4.0",
    "file-saver": "^2.0.0",
    "font-awesome": "^4.7.0",
    "i18n": "^0.8.3",
    "jquery": "^3.7.1",
    "jsencrypt": "^3.2.0",
    "lodash": "^4.17.20",
    "lodash-es": "^4.17.21",
    "minimatch": "^3.0.4",
    "moment": "^2.29.4",
    "ngx-bootstrap": "^11.0.2",
    "ngx-cookie-service": "^16.1.0",
    "ngx-currency": "^4.0.0",
    "ngx-daterangepicker-material": "^6.0.4",
    "ngx-mask": "^16.4.2",
    "ngx-progressbar": "^11.1.0",
    "ngx-scrollbar": "^13.0.3",
    "ngx-spinner": "^16.0.2",
    "ngx-toastr": "^16.2.0",
    "rxjs": "^7.8.1",
    "sass": "^1.81.0",
    "save": "^2.3.3",
    "tslib": "^2.8.1",
    "typescript-string-operations": "^1.3.1",
    "validator": "^13.9.0",
    "webpack": "^5.7.0",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.16",
    "@angular/cli": "^16.2.16",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@babel/cli": "^7.2.3",
    "@babel/preset-env": "^7.4.2",
    "@types/crypto-js": "^3.1.43",
    "@types/exceljs": "^0.5.3",
    "@types/file-saver": "^2.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.13",
    "@types/lodash": "4.14.182",
    "@types/lodash-es": "^4.17.7",
    "@types/node": "^12.20.55",
    "@types/validator": "^9.4.3",
    "babel-plugin-lodash": "^3.3.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "3.99",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ng-packagr": "^16.2.3",
    "protractor": "^7.0.0",
    "source-map-explorer": "^2.5.3",
    "ts-node": "~7.0.0",
    "tslint": "^6.1.3",
    "typescript": "4.9.5",
    "webpack-bundle-analyzer": "^4.10.2"
  }
}

问题分析与解决建议 #

核心问题定位 #

1. 组件版本兼容性：你当前使用的ngx-daterangepicker-material@6.0.4版本并未适配Angular 16，该版本的适配上限是Angular 15，升级Angular后组件内部的日期处理逻辑与新框架的模块解析、依赖加载逻辑冲突。
2. moment.js调用异常：报错中的isoWeekday和weekday是moment.js的专属方法，说明组件在生成日历日期时，拿到的不是moment实例，而是原生Date对象或其他类型，导致无法调用moment的方法。这是因为低版本组件在Angular 16的环境下，无法正确初始化或传递moment日期实例。

具体解决步骤 #

• 升级组件到适配版本
  安装适配Angular 16的ngx-daterangepicker-material版本（最低要求^7.0.0）：

  npm install ngx-daterangepicker-material@^7.0.0 --save
  

  若需要最新稳定版，可直接执行npm install ngx-daterangepicker-material@latest --save，安装前可查看组件版本说明确认兼容性。

• 确保moment.js的正确引入
  在Angular 16的树摇优化机制下，可能导致moment未被正确注入组件，可在模块中手动提供moment实例：

  import * as moment from 'moment';
  export const MOMENT_PROVIDER = { provide: 'moment', useValue: moment };
  

  然后将MOMENT_PROVIDER加入到模块的providers数组中，确保组件能获取到完整的moment对象。

• 清理缓存并重建项目
  清除旧依赖缓存，避免残留文件导致的冲突：

  rm -rf node_modules package-lock.json
  npm install
  ng build --configuration production
  

• 调试排查细节
  打开浏览器开发者工具，定位报错的组件代码位置，查看calendar[row][col]的实际类型：

  • 如果是原生Date对象，说明组件初始化日期时未正确转换为moment实例，可检查组件输入的日期值类型，确保传入的是moment对象而非原生Date。
  • 如果是undefined或其他类型，说明组件的日历生成逻辑在Angular 16下出现了初始化失败，可查看组件的生命周期钩子执行情况，排查是否有依赖未加载完成。

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