René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Router Resolve\u003cT\u003e should have official support for UrlTree based redirection","articleBody":"# 🚀 feature request\r\n\r\n### Relevant Package\r\n@angular router\r\n\r\n### Description\r\nI see that in the [docs](https://angular.io/guide/router#!#resolve-guard) it is recommended to do the following to cancel a navigation event in a `Resolve\u003cT\u003e` route data resolver.\r\n\r\n```\r\nresolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable\u003cCrisis\u003e | Observable\u003cnever\u003e {\r\n    let id = route.paramMap.get('id');\r\n \r\n    return this.cs.getCrisis(id).pipe(\r\n      take(1),\r\n      mergeMap(crisis =\u003e {\r\n        if (crisis) {\r\n          return of(crisis);\r\n        } else { // id not found\r\n          this.router.navigate(['/crisis-center']);\r\n          return EMPTY;\r\n        }\r\n      })\r\n    );\r\n  }\r\n```\r\n While this does work it generates a pretty gnarly `NavigationCancel` event that basically says 'You broke my internal state':\r\n\r\n```\r\nNavigationCancel {id: 5, url: \"/crisis-center/4444\", reason: \"Navigation ID 5 is not equal to the current navigation id 6\"}\r\nid: 5\r\nreason: \"Navigation ID 5 is not equal to the current navigation id 6\"\r\nurl: \"/crisis-center/4444\"\r\n```\r\n\r\nThis is because we have overlapping navigation events, and the original navigation is cancelled because we essentially triggered the router's panic mode.\r\n\r\n### Describe the solution you'd like\r\nAngular 7.1 introduced the option of returning a `UrlTree` from a `canActivate`, and I think something similar should be added to `Resolve\u003cT\u003e` for feature parity.\r\n\r\nA `Resolve` may fail for many reasons, but we should have a clean option to redirect within the resolver - especially in cases where it is impossible to know the final destination until you've attempted to get the data.\r\n\r\nI think perhaps the signature of `resolve` needs to become something like :\r\n\r\n     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable\u003cT | UrlTree\u003e | Promise\u003cT | UrlTree\u003e | T | UrlTree;\r\n\r\n### Describe alternatives you've considered\r\nYes, delving into the code showed me that I could throw an error that satisfies the `isNavigationCancelingError()` type-guard and not only would it give me a nicer `NavigationCancel` event it would also allow me to pass a `url: UrlTree` parameter which will then be navigated to on my behalf.\r\n\r\n          throw { ngNavigationCancelingError: true, url: this.router.createUrlTree(newUrl) };\r\n\r\nWhile this actually works quite well - and gives the following 'nice' event it isn't really supported since I have to use the magic internal property name - and also not every reason for aborting a Resolve is an error condition.\r\n\r\n```\r\nNavigationCancel {id: 11, url: \"/account/orders/latest\", reason: undefined}\r\nid: 11\r\nreason: undefined\r\nurl: \"/account/orders/latest\"\r\n```\r\n\r\nThe other alternative is what is suggested in the docs, but the error (`Navigation ID 5 is not equal to the current navigation id 6`) from doing that just makes it look like something is broken. \r\n\r\nI think the mechanics of this are basically already there, expecially with the new functionality in 7.1 to handle a `UrlTree`. There is also plenty of need for [such a feature](https://stackoverflow.com/questions/43097103/redirect-if-resolve-fails-angular-2) on Stackoverflow..","author":{"url":"https://github.com/simeyla","@type":"Person","name":"simeyla"},"datePublished":"2019-03-04T05:00:40.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7},"url":"https://github.com/29089/angular/issues/29089"}