Upgraded Angular -11 to 17, Now DateTimeAdapter (OwlMomentDateTimeModule) Failing on...

I upgraded from Angular 11 to 17. If I comment out in HTML my OwlDateTimePicker, the app loads fine. Is it really possible the OwlMomentDateTimeModule Moment Adapter just doesn't implement the localeChange Observable?! Seems unlikely I'd be the first to hit this issue if that was true. But I just can't seem to fix this after several days of trying! Any help is greatly appreciated!

application page load console error

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


Main.js line from debug:

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


HTML code

<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>


app.module

...
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 { }
...


environment

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

{
"name": "rcc-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve",
"build": "set NODE_OPTIONS=--openssl-legacy-provider && ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "npm run docs:json && start-storybook -p 6006",
"build-storybook": "npm run docs:json && build-storybook"
},
"engines": {
"node": "18.16.1"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.0",
"@angular/cdk": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^17.0.0",
"@angular/localize": "^17.0.0",
"@angular/material": "^17.3.10",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"@aws-amplify/ui-angular": "^5.0.31",
"@danielmoncada/angular-datetime-picker": "^17.0.0",
"@danielmoncada/angular-datetime-picker-moment-adapter": "^4.0.0",
"@de-electron/electron-angular-components": "^13.2.4",
"@fortawesome/angular-fontawesome": "^0.15.0",
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@ng-bootstrap/ng-bootstrap": "^17.0.0",
"@types/lodash": "^4.17.13",
"@types/quill": "^2.0.14",
"aws-amplify": "^5.3.26",
"chart.js": "^2.9.4",
"fast-json-patch": "^3.0.0-1",
"jasmine-core": "^3.8.0",
"lodash": "^4.17.21",
"mat-table-exporter": "^15.0.0",
"mimetext": "^0.2.2",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",
"ngx-daterangepicker-material": "^6.0.0",
"ngx-mask": "^17.0.0",
"ngx-quill": "25.0.0",
"quill": "2.0.2",
"quill-better-table": "^1.2.10",
"quill-delta": "^5.1.0",
"quill1-table": "^1.7.2",
"rxjs": "^7.0.0",
"rxjs-compat": "~6.5.4",
"tslib": "^2.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.0",
"@angular/elements": "^17.0.0",
"@angular/language-service": "^17.0.0",
"@babel/core": "^7.16.7",
"@compodoc/compodoc": "^1.1.18",
"@storybook/addon-actions": "^6.4.12",
"@storybook/addon-essentials": "^6.4.12",
"@storybook/addon-links": "^6.4.12",
"@storybook/angular": "^6.4.12",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@webcomponents/custom-elements": "^1.5.0",
"babel-loader": "^8.2.3",
"codelyzer": "^6.0.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~5.2.2"
},
"browser": {
"crypto": false
}
}

Continue reading...