Breadcrumb link disappears on CanDeactivate guard check

[nakash2050]

How does one prevent navigation to the clicked link (Home) when the CanDectivate guard check fails for a route? Currently when the "Home" link is clicked, the guard prevents the navigation based on the current route form check but the breadcrumb child links disappear and shows only the "Home" link as if there is no check.

[nakash2050]

@udayvunnam - Thanks for creating this wonderful library. Any suggestions to the question would be greatly appreciated..

[udayvunnam]

@nakash2050 I hope you can intercept the onClick with https://udayvunnam.github.io/xng-breadcrumb/#/intercept-breadcrumb-onclick?id=intercept-breadcrumb-onclick

Please see if you can make use of this for preventing navigation.

If this is something you wish to be the default behavior, please provide a minimal reproducible demo similar to https://stackblitz.com/edit/angular-xng-breadcrumbs

[nakash2050]

Intercept is not working from the guard. Tried using it but issue still persists.

[nakash2050]

@udayvunnam - Thanks for your response. Please find the demo below

Guard Demo

Click on "To Page 2 Child"
Click on "Back to Page 1". Confirm popup displays
Click "Cancel" button of the popup. Page stays on "Page 2 Child" but breadcrumb link disappears

[nakash2050]

@udayvunnam - Hope you got a chance to look at the demo. Any workaround? Appreciate the help.

[udayvunnam]

@nakash2050 I will check this over the weekend. Occupied with work now.

[nakash2050]

Thank you

[nakash2050]

@udayvunnam - Any luck?

[udayvunnam]

@nakash2050 tracked in #113

[nakash2050]

@udayvunnam - You might want to do a condition check with "event.shouldActivate" (this is added only when canDeactivate is used) in the router.event subscription of the detectRouteChanges() method in breadcrumb.service.ts file (Line 76) before calling the setupBreadcrumbs method

[udayvunnam]

Thanks, @nakash2050 for going through the code and identifying the fix.

This issue is fixed in xng-breadcrumb@7.1.0. Please upgrade to the latest version

[nakash2050]

@udayvunnam - Could you please push this to 6.x release? Currently using "xng-breadcrumb": "^6.8.2" with Angular 10 and the change isn't available.

Greatly appreciated

[udayvunnam]

Done. released 6.8.3

[nakash2050]

@udayvunnam - The feature is failing in another scenario i.e. when the route has a resolver. Breadcrumb loads before the resolver promise completes. Also, I saw you have added a new filter for GuardChecksEnd in the breadcrumb service. This is breaking the earlier guard check fix which was added. Now even if "cancel" button is clicked, the breadcrumb link disappears.

Instead of the below - line 68
.pipe(filter((event) => event instanceof GuardsCheckEnd))

replace with NavigationEnd
.pipe(filter((event) => event instanceof NavigationEnd))

remove "&& event.shouldActivate" from line 76

This should resolve both GuardCheck and Resolver issues.

[udayvunnam]

Thanks, @nakash2050 for the detailed analysis, can you please raise a PR?

contribution guide
local development guide

[hugo-azevedo]

EDIT: Sorry, just realised there is an issue opened specifically for this.
Hi, @udayvunnam ,
I too am seeing this issue.
Would it be possible to get a timeframe for this fix?
Thanks in advance for your time and attention.

[udayvunnam]

@nakash2050 @hugo-azevedo could you please provide replication of the issue.

Here's a sample repo https://stackblitz.com/edit/angular-xng-breadcrumbs-bkzine @nakash2050 has created earlier.

Please use the latest version of xng-breadcrumb in the demo

[nakash2050]

Here you go.

https://stackblitz.com/edit/angular-xng-breadcrumbs-bkzine?file=src/app/app.routing.module.ts

For some reason, I am not able to get the resolved data in Page2ChildComponent via http service. Hence I am throwing an error from the Resolver.

Steps:

1. While on Page1, click on Page 2 button -> Page 2 BC text is displayed.
2. Click on "To Page2 Child" -> Resolver throws error hence "Page 2 child" BC should not be displayed but it is displayed.
3. Click on "Page 2" button. Nothing happens. It means the rendered component is still "Page 2". Only when "Page 1" button is clicked is when Page 1 component is rendered.

BC should wait until all the resolvers attached to the route are resolved before the BC for the route is shown. If any error occurs, the BC should not be shown