Angular 11升级至17后OwlMomentDateTimeAdapter localeChanges订阅失败

问题现象 #

Angular从11升级到17后，注释掉HTML中的OwlDateTimePicker组件时应用正常加载；保留组件则页面加载报错，控制台输出：

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'subscribe')

调试确认错误来自Main.js中以下代码行：

this.localeSub = this.dateTimeAdapter.localeChanges.subscribe( () => {

相关代码片段 #

HTML代码 #

<input title="rangeTime" class="dt_input" name="dtReqRangeDate" [owlDateTimeTrigger]="dtReqRangeDate"
  [owlDateTime]="dtReqRangeDate" [selectMode]="'range'" [(ngModel)]="dtDateRange">
<owl-date-time [pickerType]="'calendar'" #dtReqRangeDate></owl-date-time>

AppModule配置 #

...
import { OwlDateTimeModule, OwlNativeDateTimeModule, DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from '@danielmoncada/angular-datetime-picker';
import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
...
export const MY_CUSTOM_FORMATS = {
  fullPickerInput: 'l LT z',
  parseInput: 'l LT z',
  datePickerInput: 'l',
  timePickerInput: 'LT z',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY'
};
...
@NgModule({
  imports: [
...
    NgxDaterangepickerMd,
    MatDatepickerModule,
    MatNativeDateModule,
    OwlDateTimeModule,
    OwlMomentDateTimeModule,
    OwlNativeDateTimeModule,
    NgxDaterangepickerMd,
    NgxDaterangepickerMd.forRoot({
      separator: ' - ',
      applyLabel: 'Okay',
    }),
...
  ],
  declarations: [
  ...
  ],
  providers: [Globals, AppConfig, AppInitService,
...
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS },
    { provide: DateTimeAdapter, useClass: OwlMomentDateTimeModule, deps: [OWL_DATE_TIME_LOCALE] }
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...

环境信息 #

Angular CLI: 17.3.11
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 17.3.12
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.11
@angular-devkit/build-angular   17.3.11
@angular-devkit/core            17.3.11
@angular-devkit/schematics      17.3.11
@angular/cdk                    17.3.10
@angular/cli                    17.3.11
@angular/flex-layout            15.0.0-beta.42
@angular/material               17.3.10
@schematics/angular             17.3.11
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.11.8

package.json依赖片段 #

{
  "dependencies": {
    ...
    "@danielmoncada/angular-datetime-picker": "^17.0.0",
    "@danielmoncada/angular-datetime-picker-moment-adapter": "^4.0.0",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.46",
    ...
  }
}

问题原因及修复方案 #

核心问题 #

1. 版本不匹配：@danielmoncada/angular-datetime-picker 17.x版本对应的moment适配器版本应为17.x，当前使用的4.0.0版本与主库版本差异过大，导致适配器未正确实现localeChanges Observable。
2. Provider配置错误：在providers中错误地将OwlMomentDateTimeModule（模块类）作为DateTimeAdapter的实现类，实际应使用具体的适配器类OwlMomentDateTimeAdapter。

修复步骤 #

1. 更新适配器版本
   执行命令安装与主库匹配的适配器版本：

npm install @danielmoncada/angular-datetime-picker-moment-adapter@17.0.0 --save

2. 修正AppModule配置

• 导入正确的适配器类：

import { OwlMomentDateTimeModule, OwlMomentDateTimeAdapter } from '@danielmoncada/angular-datetime-picker-moment-adapter';

• 修改providers中的DateTimeAdapter配置：

{ provide: DateTimeAdapter, useClass: OwlMomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] }

3. 清理缓存并重启项目

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng serve

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