store: Change detection stopped working in production
Versions
* ngxs: 3.1.1/3.1.2
* @angular/core: 6.0.3
Repro steps
- In smart component, add
@Select(ZooState.panda) public panda$!: Observable<Panda>; - In the same component, create subscription:
this.panda$.subscribe(a => this.panda = a);
Observed behavior
When this.panda is changed, change detection does not happen in production environment and UI is not updated (*ngIf=“panda”).
Desired behavior
Change detection should happen.
Mention any other details that might be useful (optional)
It works as expected in 3.0.1 - all environments, 3.1.1/3.1.2 - development environment. There is NO ChangeDetectionStrategy.OnPush set on component.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 32 (19 by maintainers)
Commits related to this issue
- Revert to Ngxs 3.0.1 to avoid issue https://github.com/ngxs/store/issues/415 — committed to ufoscout/Codership by ufoscout 6 years ago
- fix: action stream should return in Angular zone fixes #415, fixes #455 — committed to markwhitfeld/store by deleted user 6 years ago
- fix: action stream should return in Angular zone (#456) * fix: action stream should return in Angular zone fixes #415, fixes #455 * revert: change websocket plugin back to use public actions st... — committed to ngxs/store by markwhitfeld 6 years ago
@jhonland like I said, my last example was updated in https://stackblitz.com/edit/ngxs-mat-dialog-issue and I took off all side effects in the state class, even though, the problem remains … I’m using o action stream now!
And in your example about router, nowadays it’s working using ngZone.run like you can see in @ngxs/router-plugin: https://github.com/ngxs/store/blob/01c499f1e33a40ffebbf66ffbb46fcadb6b17d9b/packages/router-plugin/src/router.state.ts#L55
I don’t believe that is the best approach anyway…
@amcdnl I can confirm that there is a bug if you use the action stream. It is because the action stream is not returning in the angular zone. I will submit a fix today.
@juracy See your sample with a temp workaround to get it working: https://stackblitz.com/edit/ngxs-mat-dialog-issue-eo2aqj?file=src/app/confirm/confirm-handler.ts
Also, see a sample repro here of the issue and potential workarounds until it is fixed: https://stackblitz.com/edit/ngxs-actionstream-bug-repro?file=app/app.component.ts
I have a similar problem in my own project, I tried to debug using the Actions handler from the Actions import form ngxs/store, I am subscribing in the component and using the pipe ofActionDispatched() in that subscribe I console.log the value, the first time that the component is instantiated the UI gets updated, but for some reason after a navigate to other route and then return to the initial route and try again, the same ofActionDispatched subscription function console.logs the value but the UI wont update unless I do as @ufoscout says, to use tick() inside the subscription function. Side note I am subscribed to ofActionSuccessful over the same action and after navigating to other route and returning to the initial one, it Updates the console.log value as expected and the UI gets updated also, with no use of Tick() method!! I am using 3.1.3, have not tried downgrading.