Store: [Router] RouterCancel

[gfeller]

Versions

* ngxs: 3.2.0
* @angular/core: 6.0.3

### Observed behavior
After "[Router] RouterCancel" the router state is not in sync with the current route:

The RouterCancel does not revert the state:

Desired behavior

The "router"-state should be in sync with the current route.

[FortinFred]

Have the same issue. You can reproduce it by adding a canDeactivate Guard that return false on a givin route.

I think the RouterCancel and RouterError should be handled differently in the State.

  @Action([RouterNavigation, RouterError, RouterCancel])
  angularRouterAction(ctx: StateContext<RouterStateModel>, action: RouterAction<any, RouterStateSnapshot>) {
    ctx.setState({
      ...ctx.getState(),
      state: action.routerState,
      navigationId: action.event.id
    });
  }

[FortinFred]

I also wonder if the RouteNavigation should be cancelled when a route guard prevents the navigation so that an ActionHandler would be able to handle the following:

this.actions$.pipe(ofActionCanceled(RouterNavigation)).subscribe(...);
Otherwise any processing on a RouteNavigation, has to be undoned on a RouteCancel.

RouterPlugin actions should cover the actions lifecycle or have the following actions:

• RouterNavigation
  followed by one of the following:
• RouterEnd
• RouterCancel
• RouterError

//Something in the lines of...  Have to set myself up for my first PR :)
  private setUpStateRollbackEvents(): void {
    this._router.events.subscribe(e => {
      if (e instanceof RoutesRecognized) {
        this.lastRoutesRecognized = e;
      } else if (e instanceof NavigationCancel) {
        this.dispatchRouterCancel(e);
      } else if (e instanceof NavigationError) {
        this.dispatchRouterError(e);
      } else if (e instanceof NavigationEnd) {
        this.dispatchRouterEnd(...);
      }
    });
  }

[matulkum]

Just ran into the same issue. This bug makes this plugin pretty much incompatible with route guards :(

[xmlking]

similar issue : https://github.com/ngxs/store/issues/658

[xmlking]

@deebloo @ngxs/router-plugin is unusable when using with Guards.

also we have types issue:
example, we are fourced to cast RouterStateSnapshot to any to use custom type RouterStateData I used in CustomRouterStateSerializer

    this.actions$
      .pipe(
        ofActionSuccessful(RouterNavigation),
        map((action: RouterNavigation) => action.routerState as any),
        distinctUntilChanged((previous: RouterStateData, current: RouterStateData) => {
          return previous.url === current.url;
        }),
      )
      .subscribe(data => {
        this.pageTitle.setTitle(data.breadcrumbs);
        this.analytics.setPage(data.url);
      });

https://github.com/xmlking/ngx-starter-kit/blob/develop/libs/core/src/lib/state/eventbus.ts#L74

this looks like a solution for type issues:
https://github.com/ngrx/platform/blob/master/modules/router-store/src/serializer.ts#L12

wonder if anyone working on fixing this plugin. if any help needed I can contribute.

[markwhitfeld]

@xmlking Whould you like to try submit a PR for this issue?

[markwhitfeld]

@gfeller This issue may have been fixed by PR #895 which has just been released in v3.4.3!
Could you test and confirm if this issue has been fixed or not?

[thomas-ama]

Im not sure it's linked to this bug but:

• I type URL 1 in the address bar. The page renders. A RouterNavigation action is logged.
• In the same tab, I replace URL 1 by URL 2 then hit enter. URL 2 begins to loads then a redirection occurs and URL 1 is rendered again. RouterCancel action (with routerState payload undefined) then RouterNavigation action are logged.

I'm using v3.4.3.

Edit: The bug is only in dev, it disappears in prod.

[markwhitfeld]

@gfeller @thomas-ama could you test with the latest NGXS v3.5.0 and confirm if the issue still exists?

[qstiegler]

@gfeller @thomas-ama could you test with the latest NGXS v3.5.0 and confirm if the issue still exists?

I was just testing it and in dev it still happens.

[troydietz]

Sadly, I'm seeing this on dev and prod

[markwhitfeld]

@qstiegler @troydietz (and any others) would it be possible to test if this is fixed with the latest @dev version. I have just merged the above PR and it will be deployed to the @dev version by our CI in a few minutes. This PR should fix this issue.

[kpapke]

Hi, I was working with @troydietz when he reported our issue. I tested with the latest @dev version of NGXS router plugin and could not reproduce. Thanks for the quick fix!

[qstiegler]

@markwhitfeld Fix looks good for me. Thanks for your effort!

[arturovt]

Thank you for your time guys, I appreciate that. Now I'm sure we can deliver that fix.

[markwhitfeld]

Fixed in the v3.5.1 release! Closing this issue.