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
}
}
You seem to have a typo where you are using OwlMomentDateTimeModule instead of MomentDateTimeAdapter.
Could you try changing the below code and checking.
...
],
declarations: [
...
],
providers: [Globals, AppConfig, AppInitService,
...
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS },
{
provide: DateTimeAdapter,
useClass: MomentDateTimeAdapter, // <- changed here!
deps: [
OWL_DATE_TIME_LOCALE,
OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS
]
}
],
exports: [],
bootstrap: [AppComponent]
})
export class AppModule { }