更新到 angular 后 NgxMaterialTimepickerFaceComponent 出错 10

Question

I was getting proper result when I developed the code in angular 7. Today I updated the angular-cli, angular-material and angular version to 10. After the update my code stopped executing. I am getting the following error on the web console:-

*

core.js:4197 ERROR Error: Uncaught (in promise): Error: Your minutes - 56 doesn't match your minutesGap - 5
Error: Your minutes - 56 doesn't match your minutesGap - 5
    at Function.isTimeAvailable (time-adapter.ts:28)
    at TimepickerDirective.set (ngx-timepicker.directive.ts:81)
    at TimepickerDirective.writeValue (ngx-timepicker.directive.ts:128)
    at shared.ts:114
    at model.ts:1091
    at Array.forEach (<anonymous>)
    at FormControl.setValue (model.ts:1090)
    at ng_model.ts:338
    at ZoneDelegate.invoke (zone.js:386)
    at Object.onInvoke (core.js:27436)
    at resolvePromise (zone.js:832)
    at zone.js:898
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:27424)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:4197
handleError @ core.js:4245
next @ core.js:27987
schedulerFn @ core.js:24800
__tryOrUnsub @ Subscriber.ts:265
next @ Subscriber.ts:207
_next @ Subscriber.ts:139
next @ Subscriber.ts:99
next @ Subject.ts:70
emit @ core.js:24790
(anonymous) @ core.js:27459
ZoneDelegate.invoke @ zone.js:386
Zone.run @ zone.js:143
runOutsideAngular @ core.js:27363
onHandleError @ core.js:27459
ZoneDelegate.handleError @ zone.js:390
Zone.runGuarded @ zone.js:157
_loop_1 @ zone.js:701
api.microtaskDrainDone @ zone.js:708
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:231
Zone.scheduleMicroTask @ zone.js:251
scheduleResolveOrReject @ zone.js:881
ZoneAwarePromise.then @ zone.js:1027
bootstrapModule @ core.js:28024
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
index.js:52 [WDS] Live Reloading enabled.
index.js:126 [WDS] Warnings while compiling.
warnings @ index.js:126
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:67
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:279
SockJS._transportMessage @ main.js:277
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
wrapFn @ zone.js:1270
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:503
invokeTask @ zone.js:1671
globalZoneAwareCallback @ zone.js:1697
index.js:135 D:\datetimeselector\src\environments\environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
warnings @ index.js:135
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:67
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:279
SockJS._transportMessage @ main.js:277
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
wrapFn @ zone.js:1270
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:503
invokeTask @ zone.js:1671
globalZoneAwareCallback @ zone.js:1697
core.js:4197 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at NgxMaterialTimepickerFaceComponent.increaseClockHand (ngx-material-timepicker-face.component.ts:197)
    at NgxMaterialTimepickerFaceComponent.setClockHandPosition (ngx-material-timepicker-face.component.ts:168)
    at NgxMaterialTimepickerFaceComponent.ngOnChanges (ngx-material-timepicker-face.component.ts:73)
    at NgxMaterialTimepickerFaceComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7186)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
defaultErrorLogger @ core.js:4197
handleError @ core.js:4245
(anonymous) @ core.js:28360
ZoneDelegate.invoke @ zone.js:386
Zone.run @ zone.js:143
runOutsideAngular @ core.js:27363
tick @ core.js:28360
(anonymous) @ core.js:28239
ZoneDelegate.invoke @ zone.js:386
onInvoke @ core.js:27436
ZoneDelegate.invoke @ zone.js:385
Zone.run @ zone.js:143
run @ core.js:27318
next @ core.js:28238
schedulerFn @ core.js:24800
__tryOrUnsub @ Subscriber.ts:265
next @ Subscriber.ts:207
_next @ Subscriber.ts:139
next @ Subscriber.ts:99
next @ Subject.ts:70
emit @ core.js:24790
checkStable @ core.js:27372
onLeave @ core.js:27482
onInvokeTask @ core.js:27430
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:503
invokeTask @ zone.js:1671
globalZoneAwareCallback @ zone.js:1697
core.js:4197 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at NgxMaterialTimepickerFaceComponent.setClockHandPosition (ngx-material-timepicker-face.component.ts:172)
    at NgxMaterialTimepickerFaceComponent.ngOnChanges (ngx-material-timepicker-face.component.ts:73)
    at NgxMaterialTimepickerFaceComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2131)
    at callHook (core.js:3042)
    at callHooks (core.js:3008)
    at executeInitAndCheckHooks (core.js:2960)
    at refreshView (core.js:7186)
    at refreshComponent (core.js:8325)
    at refreshChildComponents (core.js:6964)
    at refreshView (core.js:7221)

Is it because angular 10 does not support NgxMaterialTimepickerFace component?

Answer 1

i got same error when i update Angular 10. so, may beThis is because newly updated Angular 10 is not Supporting this NgxMaterialTimepickerFace library !