Since 6.8.0, breadcrumb disappears on page refresh

[fgoulet]

🐞 Bug report

Description

It was working fine by injecting BreadcrumbService in the constructor of the page until I upgraded from 6.7.0 to 6.8.0

🔬 Minimal Reproduction

Add a breadcrumb in the page, hit F5 to refresh the page.

💻Your Environment

Windows 10

Angular Version: 12.1

[github-actions[bot]]

Hello 👋 @fgoulet
Thank you for raising an issue. We will investigate into the issue and get back to you as soon as possible. Please make sure you have given us as much context as possible.
Feel free to raise a PR if you can fix the issue. Check the local development guide

[udayvunnam]

@fgoulet It worked fine with a demo app. Can you please provide a reproducible example to check the issue? Use https://stackblitz.com/edit/angular-xng-breadcrumbs as reference

[fgoulet]

Hi @udayvunnam , I think I found why it does not work in our project. We use msal angular to handle authentication and, for some reasons, they set initialNavigation to enabledBlocking in the Router module configuration.

It was working fine until version 6.8.0. From 6.8.0 and up, if I set initialNavigation to enabledNonBlocking (the default), everything works again. But I'm not sure on the impact of this on msal angular.

Here's a repro. The breadcrumb does not appears when page load, but only when you click "change route". https://stackblitz.com/edit/angular-xng-breadcrumbs-fku85f?file=src/app/app.routing.module.ts

[udayvunnam]

Hi @udayvunnam , I think I found why it does not work in our project. We use msal angular to handle authentication and, for some reasons, they set initialNavigation to enabledBlocking in the Router module configuration.

It was working fine until version 6.8.0. From 6.8.0 and up, if I set initialNavigation to enabledNonBlocking (the default), everything works again. But I'm not sure on the impact of this on msal angular.

Here's a repro. The breadcrumb does not appears when page load, but only when you click "change route". stackblitz.com/edit/angular-xng-breadcrumbs-fku85f?file=src/app/app.routing.module.ts

Thanks, @fgoulet for identifying the issue. I have made a fix to this in [email protected]. Do let me know if you still face this issue.

[fgoulet]

Hi @udayvunnam , unfortunately, the issue is still present in 7.1.1. When I set intialNavigation to enabledBlocking, I loose the breadcrumb on page refresh.

[iamjustanotherrandom]

Same for me, the issue is still present in latest version

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[iSpid3r]

The issue is still relevant.

xng-breadcrumb: 8.0.2 angular: 14.0.3

The "initialNavigation" parameter is needed for Server-Side Rendering, but the breadcrumbs do not work correctly with it.

[IlyaSurmay]

same here xng-breadcrumb: 8.0.2 angular: 14.0.3

[marcelbarner]

I added the BreadcrumbService as constructor paramter of my AppModule and it worked. So I think the problem is that the service is initialized to late.

https://stackblitz.com/edit/angular-xng-breadcrumbs-xkivgs?file=src%2Fapp%2Fapp.routing.module.ts

xng-breadcrumb: 6.8.3 angular 12.2.16

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[HammadKhaan]

I added the BreadcrumbService as constructor paramter of my AppModule and it worked. So I think the problem is that the service is initialized to late.

https://stackblitz.com/edit/angular-xng-breadcrumbs-xkivgs?file=src%2Fapp%2Fapp.routing.module.ts

xng-breadcrumb: 6.8.3 angular 12.2.16

This works perfectly fine for me. Thanks :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.