Page Refresh the Breadcrumb disappears

[sagar1987]

@udayvunnam Hi I am facing issues when i refresh the browser page , the breadcrumb disappears any fix for this issue , Please let me know thanks

[udayvunnam]

Hey @sagar1987, can you let me know which version of xng-breadcrumb you are using. If you are using old version suggest you to update to latest one. The issue was fixed long ago in #1

[sagar1987]

@udayvunnam Hi Uday thanks for the reply , I am using version "xng-breadcrumb": "^2.1.0" , Please let me know how can i resolve this issue . Thanks in advance

[udayvunnam]

Hey @sagar1987, can you please provide your sample route and breadcrumb configuration. As I see with [email protected] and Angular 7, page refresh doesn't hide/disappear breadcrumb. If you need a reference for demo app please follow the steps

1. git clone https://github.com/udayvunnam/xng-breadcrumb.git && git checkout 2.x
2. npm i
3. ng serve

Now the demo app opens and showcases the library usage.

You can move to any route(even deep routes like http://localhost:4200/mentee/1/edit) and refresh. The breadcrumb still shows.

Please let me know if I am missing something or your breadcrumb configuration is different than usual.

[sagar1987]

@udayvunnam

This is my part of route

{
path: "manage-subscriptions",
children: [
{
path: '',
component: CustomerSearchComponent,
data:
{
breadcrumbAlias: 'managesubscription'
}
},
{
path: 'saved-carts/:cdbId/:countryCode/:name',
component: CartComponent,
//canActivate: [AuthGuard],
data:
{
breadcrumbAlias: 'savedcarts'
}
},

In Route module
@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule]
})
export class AppRoutingModule {

constructor(private translate: TranslateService) {}

}

In component in ngOnInit()
this.breadcrumbService.setForAlias('managesubscription', 'TEST123');

It works fine on initial load and while navigation the only problem is when i refresh the page , I think during page refresh this.breadcrumbService doesnt work , May be the refresh issue in angular for state management using services ? , Not sure how it works for you am i missing some configuration for page refresh in routing . ?

And i also notice that the array currentBreadcrumbs inside the this.breadcrumbService is empty when i refresh the page .Please find the below screen shots
WithOutRefresh :

On Refresh :

[udayvunnam]

@sagar1987 I think I understood your problem. The breadcrumb which is set dynamically in component is lost and not shown when refreshed.

The problem is where you set the this.breadcrumbService.setForAlias('managesubscription', 'TEST123')

• When you move from one route to another we store all the dynamically set labels and show them in Breadcrumb.
• But when you refresh, you have to make sure the component where you have set the dynamic label is loaded into the view.

You can move up the logic this.breadcrumbService.setForAlias() or this.breadcrumbService.set() to it's nearest parent which is always in the view no matter whichever child is rendered.

[sagar1987]

@udayvunnam Perfect answer , Yes i just injected the breadcrumbService into the constructor of AppComponent and the breadcrumbs value gets retained even on page refresh , So then the AppComponent always get loaded into the view when the page is reloaded/refreshed , Thanks a lot @udayvunnam for you valuable suggestions 💯 🥇

[vishnu-dev]

To persist breadcrumb on refresh, Add below code to your parent component, mostly app.component.ts. In the docs it is mentioned as optional, but it seems without that the breadcrumb is not persisted on refresh.

(Optional) Use BreadcrumbService, if you want to change breadcrumbs behavior(visibility, label, etc) dynamically. X

import { BreadcrumbService } from 'xng-breadcrumb';

constructor(private breadcrumbService: BreadcrumbService) {}

[dedrazer]

I had the same issue and solved it using @vishnu-dev's solution

[Adel-El-Sherif]

I had the same issue but was not resolved by @vishnu-dev 's solution, why?!

[Daniyal1123]

Hey Guys when i Used @vishnu-dev 's Solution it shows

**Failed to compile.

./node_modules/xng-breadcrumb/fesm2015/xng-breadcrumb.mjs 322:145-162
Can't import the named export 'ActivatedRoute' from non EcmaScript module (only default export is available)**

Can someone please help i am facing issue when page refreshes breadcrumbs Disappears
i am using
"ng-dynamic-breadcrumb": "^3.0.1",

[udayvunnam]

@Daniyal1123 this is xng-breadcrumb repository.

please check the documentation https://udayvunnam.github.io/xng-breadcrumb/#/quickstart

[udayvunnam]

@Adel-El-Sherif @Daniyal1123 can you please provide a reproducible example where you see this issue.

[Daniyal1123]

@udayvunnam same happening in Xng

ERROR in ./node_modules/xng-breadcrumb/fesm2015/xng-breadcrumb.mjs 322:145-162
Can't import the named export 'ActivatedRoute' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/xng-breadcrumb/fesm2015/xng-breadcrumb.mjs 329:58-75

[VISHAL69]

Hii @udayvunnam

i am facing an issue,
i have a nested routing with query params like "abd/pqr?usedId=2" and on next level of nesting the route becomes "abd/pqr/xyz?userId=2" so the first breadcrumb holds the route as "abd/pqr?usedId=2"
and as i reload the page first breadcrumb that holds route becomes "abd/pqr" as it losses its query param but if i didn't refresh the page it work excellent as expected

[salaiviswatech]

Hi @udayvunnam

If we are refreshing the page , the child route dynamic breadcrumb does not load at all. It works for parent routing. can you explain how it is working or share any demo related to that? In your repo, I don't see alias based breadcrumb label used in nested routes. Appreciate if you share any.