Support navigateByUrl equivalent

[xaralis]

There are times when go() is not sufficient as it uses navigate method internally. For example, when passing redirection links with URL params inside, internal use of navigate doesn't work well and params are not parsed properly. This can be solved by using navigateByUrl.

E.g. passing continue link with parameters: /candidates/57f39a88720e1a181134ae25;back=%2Fcandidates

This doesn't work well when doing go('/candidates/57f39a88720e1a181134ae25;back=%2Fcandidates'). The back parameter is not parsed properly and angular2 thinks it's actually the :id parameter in route definition (/candidates/:id). Instead, I have to use router.navigateByUrl('/57f39a88720e1a181134ae25;back=%2Fcandidates') which ensures the parsing is being done.

[brandonroberts]

Reasonable enough. I'll look into adding this soon.

[mischkl]

Second this. In our case we have an authentication guard that saves the requested URL, and after login we attempt to dispatch an action that redirects to that URL. Problem is, without being able to use an equivalent to navigateByUrl, any complex routing + outlet information gets mangled due to the encodeURI that occurs when navigate is called. As a result we have to resort to calling router.navigateByUrl directly, which doesn't fit with the rest of the architecture we've built.

[mischkl]

As referenced, I've submitted a pull request that adds this feature. :)

[richarddavenport]

We have a case where we need to navigate to outlets and the url looks like /orders/(25143084//modal:order-cancel). The navigate api does not like this, but navigateByUrl works perfect. I'm going to get a PR going...we need this...

[richarddavenport]

Never mind, we'll be switching over to v4.x!

[mischkl]

@richarddavenport what do you mean, 4.x of what? Angular? I googled for ngrx 4.x and couldn't find a thing.

If Angular 4.x, what difference does it make? We are using @ngrx/router-store with ng4 already.

nm I found it, looks like they moved all packages into one GitHub repo. https://github.com/ngrx/platform

[mischkl]

One thing still mystifies me: How can I do a navigation as part of an effect? Seems to me this is not possible anymore, without doing a switchMap and returning empty().

.switchMap(action => {
  this.router.navigate(['blah']);
  return empty():
})

before it was easier:

map.(() => go('blah'));

[richarddavenport]

@mischkl I believe you would just not dispatch an action:

@Effect({ dispatch: false }) searchOrdersSuccess$ = this.actions$
        .ofType(OrderListActions.SEARCH_ORDERS_SUCCESS)
        .map(() => this.router.navigate(['blah']));

And if you switch to v4 then the actions will be dispatched for you.

[mischkl]

@richarddavenport afaik you can't return a Promise<boolean> (the return type from this.router.navigate(['blah'])) or even a void (if you used closure syntax and didn't return anything), because it's expecting you to map to an Action. That's why you need to do a switchMap and return an empty Observable from it.

With the previous version the actions were dispatched just like in the new one. The main difference was that it offered actions with which you could trigger the router (e.g., go). They took these away in v4.x.

[richarddavenport]

@mischkl I'm talking about not dispatching an action...@Effect({ dispatch: false })
https://github.com/ngrx/effects/blob/master/docs/api.md#effect

Pass { dispatch: false } to the decorator to prevent actions from being dispatched.

It's my understanding that you use that when you don't want to return an action, meaning you can run any other side effects, including routing. Here is an example of doing it in the new monorepo: https://github.com/ngrx/platform/blob/master/example-app/app/auth/effects/auth.effects.ts#L27-L30

Here's the new documentation: https://github.com/ngrx/platform/blob/master/docs/effects/api.md#non-dispatching-effects

[mischkl]

Aha totally awesome, thx for the tip @richarddavenport! Very, very handy! And if you did the same thing with ngrx v3, you would create an endless loop! 😄