Breadcrumb not showing full path

[nextit]

Hi,

I have a routing like this:

const routes: Routes = [ { path: '', data: { title: 'A' }, children: [ { path: 'b', data: { title: 'B' }, children: [ { path: '', component: ListComponent }, { path: 'details', component: DetailComponent, data: { title: 'C' } } ] } ] } ];

and I expected a breadcrump like "Home / A / B / C" but I get "Home / A / B" and "Home / A / C". Is it a bug or do I have a wrong routing?

thanks

Ingmar

[john-md86]

In my case, </ app-breadcrumb> does not load the paths correctly if I use the sidebar links. It only works when I reload the entire page (F5). All routes are properly declared, and the pages are loading correctly.

before F5:

after F5:

[david-palladino]

I'm using @coreui/coreui 2.0.1 and @coreui/angular 2.0.0-rc.0. In my case what I see is that only the last breadcrumb's route title is displayed. So for example for the following routes only the title "Search" is displayed while it should instead display "Home / ERVI / Search":

export const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent, data: { title: 'Home' }, children: [ { path: 'ervi', component: ERVIComponent, data: { title: 'ERVI' }, children: [ { path: 'search', component: ERVISearchComponent, data: { title: 'Search' } } ] } ] } ]

I've debugged the coreui-angular.js code and I see that within the AppBreadcrumbService that the breadcrumbs array contains all three of the breadcrumbs so this looks like it is working properly:

But when the breadcrumb is rendered it looks like this, with only Search being displayed, and the "Home / ERVI" part is missing:

<ol _ngcontent-c0="" class="breadcrumb"><!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object" }--><!--bindings={ "ng-reflect-ng-if": "false" }--><!----><!--bindings={ "ng-reflect-ng-if": "false" }--><!----><!--bindings={ "ng-reflect-ng-if": "true" }--><li class="breadcrumb-item active" ng-reflect-klass="breadcrumb-item" ng-reflect-ng-class="[object Object]"><!--bindings={ "ng-reflect-ng-if": "false" }--><!--bindings={ "ng-reflect-ng-if": "true" }--><span tabindex="0" ng-reflect-router-link="/home/ervi/search">Search</span></li><!----><li _ngcontent-c0="" class="breadcrumb-menu d-md-down-none"><div _ngcontent-c0="" aria-label="Button group with nested dropdown" class="btn-group" role="group"><a _ngcontent-c0="" class="btn" href="#"><i _ngcontent-c0="" class="icon-speech"></i></a><a _ngcontent-c0="" class="btn" ng-reflect-router-link="/home" href="#/home"><i _ngcontent-c0="" class="icon-graph"></i> &nbsp;Home</a><a _ngcontent-c0="" class="btn" href="#"><i _ngcontent-c0="" class="icon-settings"></i> &nbsp;Settings</a></div></li></ol>

Thanks for any help you can give.

[john-md86]

In my case, it was working again. But I will leave the topic open on account of David's question.

[Vreyesm]

@jmdmao How did you resolve this problem? can you explain it a little bit please.

[john-md86]

@Vreyesm I don't remember anymore. Probably I had set something up wrong, corrected the bug, and it worked. But I'm not even using that theme anymore. I preferred to do something from scratch. You waste less time. I just left the topic open because of the other guy's doubt.

[SilverMira]

@nextit This is exactly the same problem I had, but thankfully I was able to resolve it, here's a pattern to follow in your routing.ts files if you want nested breadcrumbs to display correctly,

const routes: Routes = [
  {
    path: '',
    data: { title: 'A' },
    children: [
      {
        path: 'b',
        data: { title: 'B' },
        children: [
          { 
            path: '',
            // component B that has its own router outlet can be here  
            children: [
              {
                path: '',
                component: ListComponent,
                data: { title: 'List' }
              },
              {
                path: 'details', 
                component: DetailComponent, 
                data: { title: 'C' }
              } 
            ] 
          },
        ],
      },
    ],
  },
];

Notice how all original children of path b is now nested one layer deeper within another path: '' in the route configs, apparently this is what needed for the breadcrumbs to display correctly. Nest however deep you want with this pattern, I tried up to five layers and it's working as intended

As for how I managed to figure it out, it is from how lazy-modules are loaded in app.routing.ts in the admin template.

Correct me if I'm wrong: You can see all children are defined similarly under the children of path: '' in the routes defined in lazy-routing.module.ts. During run-time, when angular loads the module, all paths defined in that lazy-module including that path: '' and its children can be think of getting inserted to where loadChildren: () => import() was at as a sibling property children, so in this pattern, the workaround above is essentially replicating how lazy-modules's children are resolved.

TLDR: IF YOU WANT NESTED BREADCRUMBS, DEFINE YOUR ROUTES UNDER THE CHILDREN OF path: '', only the deepest path doesn't require nesting for it's breadcrumb to display.

PS: I'm surprised this issue wasn't resolved sooner, it's 2020 and the issue was opened at 2018 yo.

[github-actions[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