silent junco
I have a component that has some child routes
which are defined on this file : ProductUsageRoutes
and on my component I have a button that should navigate the user to another component with the path 'new' , but it's not working. it shows the correct path on the url when I click the button but it doesn't go anywhere nor show any errors on console
real thicket
g!badeyes @silent junco
rocky oracleBOT
@silent junco Please do not post pictures of code (especially photos of a physical screen) as they are difficult to read and difficult to correct (as you cannot copy code from a screenshot to modify it).
real thicket
Does the other path with the same component work?
silent junco
<@872995616618315806> Please do not post pictures of code (especially photos of ...
Sorry I didn't know
silent junco
Does the other path with the same component work?
it does not!
real thicket
Then the problem should be with the component.
Can you copy paste its html and ts code?
silent junco
I think the problem it's not with the component since I tried with another component and it doesn't work either
😦
it simply doesn't navigate to anywhere
real thicket
The starting route is protected by some guard, or is the first one in the picture you showed?
silent junco
do you mean this one? yeah it has a guard but I tested removing the guard and it's not working either, so I don't think that's the problem
😔
real thicket
Try to get rid of that component property, considering that you already bound it in the first child.
And I doubt you want both the editing form both the list components rendered together.
real thicket
From the route you showed in the last picture
If you had copy/pasted code, I had directly posted the changes.
silent junco
Sorry, I see. I can't remove it there since that component can be accesed from another screen so it needs a path
real thicket
It already has the same path as its first child.
silent junco
it doesn't right? because the first child has an empty path : '' , and the main route has a 'product-usages' path
real thicket
An empty string as a path means "the same path of my parent"
real thicket
You keep seeing list component?
silent junco
Yes
real thicket
add pathMatch: 'full' to the empty path route.
silent junco
ok, let me see
so you say, leave it like this , right { path: 'product-usages', children: ProductUsageRoutes, data: { minVersion: ProteinRoutingMinApiVersions.PROTEIN_PRODUCT_USAGES_MIN_VER } }
and the child route like this:
{ path: '', component: ProductUsageListPage, pathMatch: 'full' },
real thicket
yes
real thicket
That's how pathMatch works in angular router.
By default it's set to 'prefix', that means that it will pick the first route which path matches the target address from the left.
An empty path will match as prefix every children of its parent.
So if you put it on top of the list, and don't change its pathMatch, it will take precedence on everyone of its siblings.
silent junco
I see