Regarding paths in routes | Angular Community | Page 1

potent veldt Dec 5, 2022, 4:44 PM

#

I am following a tutorial and this is the code it shows:

Questions:
Do I really need the first option? Seems like the last one would match an empty string too.

Tutorial says pathMatch: full is needed on last one or else there'd be endless redirects, upon testing, endless redirects don't happen without that config

#

or perhaps I'm not noticing the endless redirect, not sure

timber pollen Dec 5, 2022, 4:46 PM

#

Generally path: '' without pathMatch: 'full' is an error

potent veldt Dec 5, 2022, 4:47 PM

#

I was thinking that because the docs say it matches from left to right and as soon as it finds a match it goes there

#

how come other paths do work for me though? i'd expect them to always take me to home page

timber pollen Dec 5, 2022, 4:48 PM

#

Right now, every path matches the first HomeComponent. And you don't have a redirect (visible in your code) so I don't know how a redirect could happen.

#

g!badeyes @potent veldt Post code as text please

sour stormBOT Dec 5, 2022, 4:48 PM

#

@potent veldt 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).

potent veldt Dec 5, 2022, 4:49 PM

#

noted

#

if I put any path not on there it is taking me to home component

timber pollen Dec 5, 2022, 4:49 PM

#

Angular Router's path matching is a little smarter than it claims. But still you should be clear about what you want to have. Which means properly decorating and ordering your routers.

potent veldt Dec 5, 2022, 4:50 PM

#

that is what the last option is for according to the tuto

timber pollen Dec 5, 2022, 4:50 PM

#

potent veldt if I put any path not on there it is taking me to home component

Yes, because ** assigns that router to the component: HomeComponent

#

There is no point in putting pathMatch: 'full' on path: '**'

#

g!toh @potent veldt Maybe you should do the official tutorial instead of one that is wrong or confusing you.

sour stormBOT Dec 5, 2022, 4:51 PM

#

@potent veldt The place we recommend starting your Angular journey is with the Tour of Heroes tutorial, located here https://angular.io/tutorial.

potent veldt Dec 5, 2022, 4:51 PM

#

thanks I completed that a while back

#

when would endless redirects actually happen?

timber pollen Dec 5, 2022, 4:52 PM

#

Post the routes as text please

#

There are no redirects in your code. No redirects happen at all

potent veldt Dec 5, 2022, 4:52 PM

#

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'members', component: MemberListComponent },
  { path: 'members/:id', component: MemberDetailComponent },
  { path: 'lists', component: ListsComponent },
  { path: 'messages', component: MessagesComponent },
  { path: '**', component: HomeComponent, pathMatch: 'full' },
];

#

got it

timber pollen Dec 5, 2022, 4:53 PM

#

There are no redirects in your code. No redirects happen at all
Unless you've done something terrible in your code.

potent veldt Dec 5, 2022, 4:53 PM

#

so am I correct that the first option I can get rid of?

timber pollen Dec 5, 2022, 4:54 PM

#

const routes: Routes = [
  { path: 'lists', component: ListsComponent },
  { path: 'members', component: MemberListComponent },
  { path: 'members/:id', component: MemberDetailComponent },
  { path: 'messages', component: MessagesComponent },
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: '**', redirectTo: '/' },
];

potent veldt Dec 5, 2022, 4:54 PM

#

const routes: Routes = [
  // { path: '', component: HomeComponent },
  { path: 'members', component: MemberListComponent },
  { path: 'members/:id', component: MemberDetailComponent },
  { path: 'lists', component: ListsComponent },
  { path: 'messages', component: MessagesComponent },
  { path: '**', component: HomeComponent /*, pathMatch: 'full' */ },
];

timber pollen Dec 5, 2022, 4:54 PM

#

This would be the typical way to set that up ☝️ But what you are doing is non-standard.

#

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'lists', component: ListsComponent },
  { path: 'members', component: MemberListComponent },
  { path: 'members/:id', component: MemberDetailComponent },
  { path: 'messages', component: MessagesComponent },
  { path: '', pathMatch: 'full', redirectTo: '/home' },
  { path: '**', component: PageNotFoundComponent },
];

timber pollen Dec 5, 2022, 4:56 PM

#

potent veldt ```js const routes: Routes = [ // { path: '', component: HomeComponent }, { ...

If you want to be different then this would be better I think

potent veldt Dec 5, 2022, 4:56 PM

#

ah I see, I was just looking at tour of heroes

#

what would be "standard" then

#

yours looks like the tour of heroes example

#

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];