Breadcrumbs initial state is empty when chained in multiple router outlets

[Vankerkom]

🐞 Bug report

Description

The breadcrumbs do not initialize correctly when chained into multiple router outlets. The breadcrumbs show up after navigating to another page.

🔬 Minimal Reproduction

Create an application with the following structure:

• Application Shell
  • Router Outlet
• Feature Shell (Lazy loaded)
  • Router Outlet
• Detailed Feature Shell
  • Breadcrumb Component
    • xng-breadcrumb

💻Your Environment

[email protected] Angular Version: 12.1

🔥 Exception or Error

None.

[github-actions[bot]]

Hello 👋 @Vankerkom
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]

@Vankerkom can you please provide a reproducible example. Please use https://stackblitz.com/edit/angular-xng-breadcrumbs as reference

[TobiasXy]

For anyone who comes across this issue with a similar problem: I spend some time trying to create a reproducible example, because this happened on a project of mine too and it was super annoying.

Here it is: https://stackblitz.com/edit/angular-xng-breadcrumbs-ch2s2r?file=src%2Fapp%2Fapp.component.ts

What (apparently) was my problem: I have an app with several layers of nested modules and a lots of lazy loaded routes. Take this structure for example (each entry is a module with corresponding component):

app
    main <-- this extra level seems important to reproduce the problem
        feature1
        feature2

The element is included in the "main" component, NOT in the "app" component.

When you open (or refresh) the page there is no breadcrumb shown. It only shows up once you click on "Feature2" and then it will stay even if you go back to Feature1. It's only missing on initial page load.

What solved it for me (and does as well in this example) is to require an instance of BreadcrumbService in AppComponent. I guess this makes sure the service is instantiated early enough(?).

TL;DR: Inject an instance of BreadcrumbService into the constructor of your AppComponent.

[udayvunnam]

Thank you @TobiasXy for the analysis and also for providing a fix from the application side.

If you know how to fix this in the library without having to inject in App component, please provide a fix as PR.

contribution guide local development guide

[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.

[udayvunnam]

not stale

[stephencarvalho]

I'm having the same issue. Using version 6.8.3 on Angular 10. Apart from the work around fix mentioned has there been any other fix?

[stephencarvalho]

@TobiasXy could you share a code example of the fix you mentioned. Because I injected the breadcrumbService into my app.component.ts but I'm still getting the same issue.

When I initially load my application I do not see the breadcrumb but if I click on another page and comeback to the homepage then I can see the breadcrumbs

[stephencarvalho]

@udayvunnam Have there been any fixes for this issue?

[TobiasXy]

In february I wasn't able to set up the test suite, so unfortunately I couldn't provide a fix. It didn't bother me anymore, because the workaround mentioned earlier works for me. If I find some time I might look into it again, but can't promise it.

A code example (that also works in the stackblitz linked above) would be this code in your app.component.ts (or whatever your outermost component is called)

// ...
import { BreadcrumbService } from 'xng-breadcrumb';
// ...

export class AppComponent {

// ...
  constructor(breadcrumbService: BreadcrumbService /*, other parameters */) {
    //...
  }

// ....
}

[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.