title: Using breadcrumb component inside lazy loaded modules injected by router-outlet
body: <p>I'm building angular 8 breadcrumb component. Application requires it to be displayed usually in the content of the page (not only) but it's never located in the header which could be outside router-outlet. And this is where the problem appears. 
  I'm using lazy loaded modules, placing  component inside lazy loaded component templates.</p>
  
  <p>I wanted to create an observable. Map to router root firstChild by using filter first. But I can't manage to pass the condition... 
  This is what I have tried so far.</p>
  
  <pre><code>breadcrumbs$: Observable&lt;Breadcrumb[]&gt;;
  
  constructor(router: Router, activatedRoute: ActivatedRoute) {
  this.breadcrumbs$ = router.events.pipe(
              filter(event =&gt; event instanceof NavigationEnd),
                  map(() =&gt; {
                      return this.buildBreadcrumbs(activatedRoute.root.firstChild);
              })
          );
  }
  
  buildBreadcrumbs(route: ActivatedRoute) {
  // logic
  }
  
  </code></pre>
  
  <p>The problem appears only when breadcrumb component is rendered inside router-outlet. If I place it on the same level in the template then it works just fine.
  Normal if condition checking for NavigationEnd event with subscription to router.events works. Is there any way arround?</p>
  
  <p>Thanks for your suggestions!</p>
  
  <p><strong>Edit:</strong> I attached some real life example here <a href="https://stackblitz.com/edit/breadcrumbs-mwsp" rel="nofollow noreferrer">https://stackblitz.com/edit/breadcrumbs-mwsp</a></p>