Breadcrumb component doesn't have any URLs registred if it's called from child route

[darkolakovic]

If breadcrumb component is called from template in child route <breadcrumb></breadcrumb> , where we have defined <router-outlet></router-outlet> it doesn't have any of URLs registred and therefore, breadcrumbs doesn't display anything. However if we navigate somewhere inside application, it's starts working.

For example here is the list of defined routes in application:

const appRoutes: Routes = [
  {path: '', component: HomeComponent, pathMatch: 'full'},
  {
    path: 'services', component: ServicesComponent, children: [
      {path: '', redirectTo: 'electronics', pathMatch: 'full'},
      {path: 'electronics', component: ElectronicsComponent},
      {path: 'fashion', component: FashionComponent}
  ]
  },
  {
    path: 'security', component: SecurityComponent, children: [
      {path: '', redirectTo: 'login', pathMatch: 'full'},
      {path: 'login', component: LoginComponent},
      {path: 'signup', component: SignupComponent}
  ]
  },
];

If we would call a breadcrumb component inside app,component.html, where we have first call of router-outlet everything will work:

<breadcrumb></breadcrumb>
<router-outlet></router-outlet>

However if we would make same call inside ServicesComponent, which is child route which has registred other children routes, described issue will appear.

Why I would like to call it inside child components and not from the root direclty, is because I want to have breadcrumbs displaying it only there on Services components. Calling hideRoute(route: string) function from breadCrumbService can't help in this case since security pages have completely different HTML then services pages.