locale - Upgraded Angular -11 to 17, Now DateTimeAdapter (OwlMomentDateTimeModule) Failing on dateTimeAdapter.localeChanges.subs

admin管理员组

文章数量:1336320

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

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

• angular
• locale
• datetimepicker
• angular-upgrade
• owl-date-time

Share Improve this question Follow asked Nov 19, 2024 at 23:59 carlupqcarlupq 32822 silver badges77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

Source Code

本文标签：