Page Refresh the Breadcrumb disappears about xng-breadcrumb HOT 15 CLOSED

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) {}

from xng-breadcrumb.

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

from xng-breadcrumb.

@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 💯 🥇

from xng-breadcrumb.

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.

from xng-breadcrumb.

@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.

from xng-breadcrumb.

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

from xng-breadcrumb.

@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

from xng-breadcrumb.

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.

from xng-breadcrumb.

@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 :

from xng-breadcrumb.

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

from xng-breadcrumb.

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",

from xng-breadcrumb.

@Daniyal1123 this is xng-breadcrumb repository.

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

from xng-breadcrumb.

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

from xng-breadcrumb.

@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

from xng-breadcrumb.

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

from xng-breadcrumb.