ng2-breadcrumb use with child route in angular 4 and angular material

[hquangthinh]

Hi,
I'm using ng2-breadcrumb in my angular 4 project with angular material. I configure the children route for some feature modules. The breadcrumb works but there's one issue when I'm in a child route, e.x
http://myapp/material/cards
When I reload the page at url http://myapp/material/cards the breadcrumb does not render correctly it render as if I'm at the root url.

Does anyone having this same issue?
Thank you

[nitramau]

Hi

I think I might have a similar issue with child routes. Since upgrading to Angular 4, the bread crumbs don't always work. If I navigate to http://localhost/abc the breadcrumbs don't show up. But If I then go to http://localhost/abc/def the breadcrumbs do show up. I can then use the breadcrumbs to get back to http://localhost/abc and they will show correctly on that page. I haven't found a solution to this yet.

[nitramau]

I was able to diagnose my problem, and found that the following fix worked for me:
In breadcrumb.ts, I added this line to the end of ngOnInit():
this.generateBreadcrumbTrail(this.router.url);
The other places that call this.generateBreadcrumbTrail(this.router.url); were not always being called for me.
I'd be interested to hear from @gmostert if this change makes sense, and if he'd like it included in the library via a pull request.
This link might explain why it is not working anymore: angular/angular#17473
(I am using Angular Animations.)

[Bidthedog]

I get this exact behaviour when using child routes in a shared module - the initial load of any page shows a blank breadcrumb, but any subsequent navigation then shows them up as expected.

[gabrielfuller]

Just like @nitramau I was able to fix this by adding this.generateBreadcrumbTrail(this.router.url); in breadcrumb.ts, at the end of ngOnInit().

Any idea when this will be fixed?

[hatemhosny]

when added this.generateBreadcrumbTrail(this.router.url); in breadcrumb.ts, at the end of ngOnInit() I got duplicate breadcrumbs.

It works fine when I use:
this._urls.length = 0;
this.generateBreadcrumbTrail(this.router.url);

[Liahus1996]

Adding this.generateBreadcrumbTrail(this.router.url); still doesnt help for me , is there any other way around ?