🐞[BUG]: ngxs router state updates before route is activated

troydietz commented 4 years ago

Affected Package

The issue is caused by package @ngxs/router-plugin.

Is this a regression?

Yes, the previous version in which this bug was not present was: 3.4.x

Description

Ngxs router state is out of sync with Angular router state when route resolvers are running.

🔬 Minimal Reproduction

I have created a stackblitz to demonstrate the problem. Basic component structure includes a top navigation menu, a conditionally rendered sub menu, and the router outlet component. You will also notice a debugging component at the top of the app. This app has two routes: /home and /profile. The /profile route has a route resolver that delays 3 seconds -- mimicking a network request.

Steps to reproduce (assumes you are starting from /home):

Click "Profile"
Observe for 3 seconds:
- The debugging component displays a red message, "NGXS Router state is NOT in sync with Angular Router :("
- NGXS router url is not the same as Angular router url
- NGXS router url is not the same as stackblitz browser url

Note: I included the conditionally rendering sub-menu component to demonstrate one of our use cases. The sub-menu should only be rendered when on the /profile route. As you can see in the screenshot, while route resolvers are still running, the sub-menu is rendered while still /home

https://stackblitz.com/edit/ngxs-repro-r5pzrw

According to Angular docs on route resolvers:

The router will then wait for the data to be resolved before the route is finally activated. source: https://angular.io/api/router/Resolve

Current behavior:

User clicks "Profile" route
NGXS Router state updates
Wait for route resolvers to complete
Angular activates route

Expected behavior:

User clicks "Profile" route
Wait for route resolvers to complete
Angular activates route
NGXS Router state updates

I believe NGXS router state should always be in sync with Angular router.

🔥 Exception or Error


none

Environment


Libs:
- @angular/core version: 7.x, 8.x, 9.x
- @ngxs/store version: 3.5.x, 3.6.x

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: 10.13.0  
- Platform:  Mac

Others:

catchshyam commented 4 years ago

Hello, Is a release that includes this PR planned? I am in the process of Angular 9 migration and this bug is blocking the migration. Thanks.

splincode commented 4 years ago

@markwhitfeld ping

catchshyam commented 4 years ago

Hello NGXS team, thank you for all the wonderful work. I see that this issue is marked for 3.7.0 release but is there an ETA. NGXS is at the very heart of my application (which is fairly complex) and I can not go ahead with Angular 9 upgrade until this issue is resolved. Thank you.

markwhitfeld commented 4 years ago

Good news, this has been addressed in NGXS v3.7 which was released last week. ( see https://dev.to/ngxs/announcing-ngxs-3-7-1kbk for release notes )

I will close this issue. Please let us know if it is not resolved.

catchshyam commented 4 years ago

@markwhitfeld thanks for the release but this issue is not resolved with 3.7.0. I will post a simple reproduction soon.

catchshyam commented 4 years ago

@markwhitfeld here is a simple reproduction.

Angular 8 with ngxs store and router plugin 3.3.1 https://stackblitz.com/edit/angular8-ngxs-issue-1605

Angular 10 with ngxs store and router plugin 3.7.0 https://stackblitz.com/edit/angular10-ngxs-issue-1605

On the /home route, click on "details" link.

And on the details page, you will see the detected URL. With angular 8, the url is "details" while aith angular 10, it is displayed as home.

Can you please reopen this bug. Also, would it be possible to provide an interim release with this bug fix. We have been held up on Angular 9 upgrade for almost 6 months now due to this bug alone. Thank you!

dmrickey commented 3 years ago

@catchshyam We're on Angular 11 (and 10 and 9 before that) with @ngxs/store 3.6.2 and never ran into this issue. A coworker mistakenly updated the package thinking it would be good to do so (we were sticking on 3.6.2 for intellisense with select statements which was broken (reverted..) for 3.7.x. But this is definitely still broken in 3.7.1 (latest as of this writing).

3.6.2 should be fine to revert to and will allow you to update Angular as well (assuming you're not using any of the new features in 3.7.x). In my opinion, sticking with 3.6.2 to have intellisense working for select statements is more than enough reason to stick with that version--and now this on top of that.

Specifically we're on store 3.6.2 and router-plugin 3.7.1 (no particular reason, it just works that way and we never downgraded router-plugin to match ¯\(ツ)/¯ )

dmrickey commented 3 years ago

@markwhitfeld This is still an issue with 3.7.1

markwhitfeld commented 3 years ago

Oh my. It seems that this was never addressed in 3.7. I don't see any PR, unless I am mistaken. @arturovt do remember any work on this for 3.7?

markwhitfeld commented 1 year ago

Great news! v3.8.0 has been released and it includes a fix for this issue. We are closing this issue, but please re-open it if the issue is not resolved. Please leave a comment in the v3.8.0 release discussion if you come across any regressions with respect to your issue.

ngxs / store