我从 Angular 11 升级到 17。如果我在 HTML 中注释掉我的 OwlDateTimePicker，则应用程序加载正常。 OwlMomentDateTimeModule Moment Adapter 真的有可能没有实现 localeChange Observable 吗？！如果这是真的，我似乎不太可能是第一个遇到这个问题的人。但经过几天的尝试，我似乎无法解决这个问题！非常感谢任何帮助！
应用程序页面加载控制台错误
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>
应用程序模块
...
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
{
"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
}
}
您似乎使用了
OwlMomentDateTimeModuleMomentDateTimeAdapter您可以尝试更改以下代码并检查吗？
...
],
declarations: [
...
],
providers: [Globals, AppConfig, AppInitService,
...
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS },
{ provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE, OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS] } // <- changed
here!
],
exports: [],
bootstrap: [AppComponent]
})
export class AppModule { }