search

ngxs / store

🚀 NGXS - State Management for Angular
http://ngxs.io
MIT License
3.54k stars 406 forks source link

🐞[BUG]: NgxsFormPlugin not work in Angular17 #2080

Closed qq253498229 closed 1 year ago

qq253498229 commented 1 year ago

Affected Package

@ngxs/form-plugin

Is this a regression?

no

Description

A clear and concise description of the problem... After adding the statement `ngxsForm="user.editForm"`, an error occurs; without it, everything works normally. ## 🔬 Minimal Reproduction https://github.com/qq253498229/error004 `src/app/modules/user/user-edit-form/user-edit-form.component.html` ## 🔥 Exception or Error 




Angular is running in development mode.
user-list.component.ts:25 user list init isDevMode true
core.mjs:11747 ERROR TypeError: Cannot read properties of null (reading 'pipe')
at FormDirective.ngOnInit (ngxs-form-plugin.js:243:43)
at callHookInternal (core.mjs:3519:14)
at callHook (core.mjs:3546:13)
at callHooks (core.mjs:3501:17)
at executeInitAndCheckHooks (core.mjs:3451:9)
at selectIndexInternal (core.mjs:11949:17)
at Module.ɵɵadvance (core.mjs:11932:5)
at UserEditFormComponent_Template (user-edit-form.component.html:3:20)
at executeTemplate (core.mjs:12154:9)
at refreshView (core.mjs:13397:13)
handleError @ core.mjs:11747
(anonymous) @ core.mjs:32567
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:14598
(anonymous) @ core.mjs:32567
tick @ core.mjs:32432
(anonymous) @ core.mjs:32581
invoke @ zone.js:368
onInvoke @ core.mjs:14702
invoke @ zone.js:367
run @ zone.js:129
run @ core.mjs:14553
next @ core.mjs:32580
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
checkStable @ core.mjs:14621
onLeave @ core.mjs:14752
onInvokeTask @ core.mjs:14696
invokeTask @ zone.js:401
runTask @ zone.js:173
invokeTask @ zone.js:483
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
core.mjs:11747 ERROR TypeError: Cannot read properties of null (reading 'dirty')
at Object.next (ngxs-form-plugin.js:209:21)
at ConsumerObserver2.next (Subscriber.js:96:33)
at Subscriber2._next (Subscriber.js:63:26)
at Subscriber2.next (Subscriber.js:34:18)
at ngxs-store.js:684:50
at DispatchOutsideZoneNgxsExecutionStrategy.runInsideAngular (ngxs-store.js:153:14)
at DispatchOutsideZoneNgxsExecutionStrategy.leave (ngxs-store.js:149:17)
at InternalNgxsExecutionStrategy.leave (ngxs-store.js:704:36)
at Object.next (ngxs-store.js:684:33)
at ConsumerObserver2.next (Subscriber.js:96:33)
handleError @ core.mjs:11747
next @ core.mjs:31889
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
(anonymous) @ core.mjs:14728
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:14598
onHandleError @ core.mjs:14728
handleError @ zone.js:372
runTask @ zone.js:176
invokeTask @ zone.js:483
ZoneTask.invoke @ zone.js:472
data.args. @ zone.js:2347
setTimeout (async)
scheduleTask @ zone.js:2349
scheduleTask @ zone.js:389
onScheduleTask @ core.mjs:14371
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:279
scheduleTask @ zone.js:382
scheduleTask @ zone.js:216
scheduleMacroTask @ zone.js:239
scheduleMacroTaskWithCurrentZone @ zone.js:672
(anonymous) @ zone.js:2391
proto. @ zone.js:962
setTimeout @ timeoutProvider.js:12
reportUnhandledError @ reportUnhandledError.js:4
handleUnhandledError @ Subscriber.js:168
ConsumerObserver2.next @ Subscriber.js:99
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ ngxs-store.js:684
runInsideAngular @ ngxs-store.js:153
leave @ ngxs-store.js:149
leave @ ngxs-store.js:704
next @ ngxs-store.js:684
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ distinctUntilChanged.js:15
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ map.js:7
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
ReplaySubject2._subscribe @ ReplaySubject.js:37
Observable2._trySubscribe @ Observable.js:38
Subject2._trySubscribe @ Subject.js:95
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ share.js:42
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ map.js:6
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ catchError.js:9
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ distinctUntilChanged.js:10
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ ngxs-store.js:682
Observable2._trySubscribe @ Observable.js:38
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ takeUntil.js:8
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
ngOnInit @ ngxs-form-plugin.js:208
callHookInternal @ core.mjs:3519
callHook @ core.mjs:3546
callHooks @ core.mjs:3501
executeInitAndCheckHooks @ core.mjs:3451
selectIndexInternal @ core.mjs:11949
ɵɵadvance @ core.mjs:11932
UserEditFormComponent_Template @ user-edit-form.component.html:3
executeTemplate @ core.mjs:12154
refreshView @ core.mjs:13397
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInEmbeddedViews @ core.mjs:13542
refreshView @ core.mjs:13421
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInternal @ core.mjs:13306
detectChanges @ core.mjs:13910
tick @ core.mjs:32422
(anonymous) @ core.mjs:32581
invoke @ zone.js:368
onInvoke @ core.mjs:14702
invoke @ zone.js:367
run @ zone.js:129
run @ core.mjs:14553
next @ core.mjs:32580
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
checkStable @ core.mjs:14621
onLeave @ core.mjs:14752
onInvokeTask @ core.mjs:14696
invokeTask @ zone.js:401
runTask @ zone.js:173
invokeTask @ zone.js:483
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
core.mjs:11747 ERROR TypeError: Cannot read properties of null (reading 'getRawValue')
at Object.next (ngxs-form-plugin.js:223:26)
at ConsumerObserver2.next (Subscriber.js:96:33)
at Subscriber2._next (Subscriber.js:63:26)
at Subscriber2.next (Subscriber.js:34:18)
at take.js:12:32
at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
at Subscriber2.next (Subscriber.js:34:18)
at ngxs-store.js:684:50
at DispatchOutsideZoneNgxsExecutionStrategy.runInsideAngular (ngxs-store.js:153:14)
at DispatchOutsideZoneNgxsExecutionStrategy.leave (ngxs-store.js:149:17)
handleError @ core.mjs:11747
next @ core.mjs:31889
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
(anonymous) @ core.mjs:14728
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:14598
onHandleError @ core.mjs:14728
handleError @ zone.js:372
runTask @ zone.js:176
invokeTask @ zone.js:483
ZoneTask.invoke @ zone.js:472
data.args. @ zone.js:2347
setTimeout (async)
scheduleTask @ zone.js:2349
scheduleTask @ zone.js:389
onScheduleTask @ core.mjs:14371
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:279
scheduleTask @ zone.js:382
scheduleTask @ zone.js:216
scheduleMacroTask @ zone.js:239
scheduleMacroTaskWithCurrentZone @ zone.js:672
(anonymous) @ zone.js:2391
proto. @ zone.js:962
setTimeout @ timeoutProvider.js:12
reportUnhandledError @ reportUnhandledError.js:4
handleUnhandledError @ Subscriber.js:168
ConsumerObserver2.next @ Subscriber.js:99
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ take.js:12
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
(anonymous) @ ngxs-store.js:684
runInsideAngular @ ngxs-store.js:153
leave @ ngxs-store.js:149
leave @ ngxs-store.js:704
next @ ngxs-store.js:684
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ distinctUntilChanged.js:15
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ map.js:7
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
ReplaySubject2._subscribe @ ReplaySubject.js:37
Observable2._trySubscribe @ Observable.js:38
Subject2._trySubscribe @ Subject.js:95
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ share.js:42
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ map.js:6
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ catchError.js:9
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ distinctUntilChanged.js:10
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ ngxs-store.js:682
Observable2._trySubscribe @ Observable.js:38
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ take.js:10
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
ngOnInit @ ngxs-form-plugin.js:220
callHookInternal @ core.mjs:3519
callHook @ core.mjs:3546
callHooks @ core.mjs:3501
executeInitAndCheckHooks @ core.mjs:3451
selectIndexInternal @ core.mjs:11949
ɵɵadvance @ core.mjs:11932
UserEditFormComponent_Template @ user-edit-form.component.html:3
executeTemplate @ core.mjs:12154
refreshView @ core.mjs:13397
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInEmbeddedViews @ core.mjs:13542
refreshView @ core.mjs:13421
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInternal @ core.mjs:13306
detectChanges @ core.mjs:13910
tick @ core.mjs:32422
(anonymous) @ core.mjs:32581
invoke @ zone.js:368
onInvoke @ core.mjs:14702
invoke @ zone.js:367
run @ zone.js:129
run @ core.mjs:14553
next @ core.mjs:32580
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
checkStable @ core.mjs:14621
onLeave @ core.mjs:14752
onInvokeTask @ core.mjs:14696
invokeTask @ zone.js:401
runTask @ zone.js:173
invokeTask @ zone.js:483
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
core.mjs:11747 ERROR TypeError: Cannot read properties of null (reading 'disabled')
at Object.next (ngxs-form-plugin.js:233:21)
at ConsumerObserver2.next (Subscriber.js:96:33)
at Subscriber2._next (Subscriber.js:63:26)
at Subscriber2.next (Subscriber.js:34:18)
at ngxs-store.js:684:50
at DispatchOutsideZoneNgxsExecutionStrategy.runInsideAngular (ngxs-store.js:153:14)
at DispatchOutsideZoneNgxsExecutionStrategy.leave (ngxs-store.js:149:17)
at InternalNgxsExecutionStrategy.leave (ngxs-store.js:704:36)
at Object.next (ngxs-store.js:684:33)
at ConsumerObserver2.next (Subscriber.js:96:33)
handleError @ core.mjs:11747
next @ core.mjs:31889
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
(anonymous) @ core.mjs:14728
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:14598
onHandleError @ core.mjs:14728
handleError @ zone.js:372
runTask @ zone.js:176
invokeTask @ zone.js:483
ZoneTask.invoke @ zone.js:472
data.args. @ zone.js:2347
setTimeout (async)
scheduleTask @ zone.js:2349
scheduleTask @ zone.js:389
onScheduleTask @ core.mjs:14371
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:279
scheduleTask @ zone.js:382
scheduleTask @ zone.js:216
scheduleMacroTask @ zone.js:239
scheduleMacroTaskWithCurrentZone @ zone.js:672
(anonymous) @ zone.js:2391
proto. @ zone.js:962
setTimeout @ timeoutProvider.js:12
reportUnhandledError @ reportUnhandledError.js:4
handleUnhandledError @ Subscriber.js:168
ConsumerObserver2.next @ Subscriber.js:99
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ ngxs-store.js:684
runInsideAngular @ ngxs-store.js:153
leave @ ngxs-store.js:149
leave @ ngxs-store.js:704
next @ ngxs-store.js:684
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ distinctUntilChanged.js:15
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ map.js:7
OperatorSubscriber2._this._next @ OperatorSubscriber.js:15
Subscriber2.next @ Subscriber.js:34
ReplaySubject2._subscribe @ ReplaySubject.js:37
Observable2._trySubscribe @ Observable.js:38
Subject2._trySubscribe @ Subject.js:95
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ share.js:42
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ map.js:6
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ catchError.js:9
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ distinctUntilChanged.js:10
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ ngxs-store.js:682
Observable2._trySubscribe @ Observable.js:38
(anonymous) @ Observable.js:32
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
(anonymous) @ takeUntil.js:8
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:19
Observable2.subscribe @ Observable.js:23
ngOnInit @ ngxs-form-plugin.js:232
callHookInternal @ core.mjs:3519
callHook @ core.mjs:3546
callHooks @ core.mjs:3501
executeInitAndCheckHooks @ core.mjs:3451
selectIndexInternal @ core.mjs:11949
ɵɵadvance @ core.mjs:11932
UserEditFormComponent_Template @ user-edit-form.component.html:3
executeTemplate @ core.mjs:12154
refreshView @ core.mjs:13397
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInEmbeddedViews @ core.mjs:13542
refreshView @ core.mjs:13421
detectChangesInView @ core.mjs:13622
detectChangesInViewIfAttached @ core.mjs:13585
detectChangesInComponent @ core.mjs:13574
detectChangesInChildComponents @ core.mjs:13635
refreshView @ core.mjs:13447
detectChangesInternal @ core.mjs:13306
detectChanges @ core.mjs:13910
tick @ core.mjs:32422
(anonymous) @ core.mjs:32581
invoke @ zone.js:368
onInvoke @ core.mjs:14702
invoke @ zone.js:367
run @ zone.js:129
run @ core.mjs:14553
next @ core.mjs:32580
ConsumerObserver2.next @ Subscriber.js:96
Subscriber2._next @ Subscriber.js:63
Subscriber2.next @ Subscriber.js:34
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:19
Subject2.next @ Subject.js:31
emit @ core.mjs:14289
checkStable @ core.mjs:14621
onLeave @ core.mjs:14752
onInvokeTask @ core.mjs:14696
invokeTask @ zone.js:401
runTask @ zone.js:173
invokeTask @ zone.js:483
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695

Environment


Libs:
- @angular/core version: 17.0.0
- @ngxs/store version: 3.8.1
- @ngxs/form-plugin version: 3.8.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: v18.18.0  
- Platform:  macOS 13.6 (22G120) 

Others:
qq253498229 commented 1 year ago

My apologies, I rebuilt the project, and now it runs smoothly.