Angular 12. Both URLs below should be handled by the same component DishComponent. (Preferably one entry to handle both):

1. /menu/:dishid
2. /menu/:dishid/whatever_is_optional_and_tobe_ignore

The last part /whatever_is_optional_and_tobe_ignore is free-text decoration only, chef can change it anytime, insignificant and to be ignored. Based on post1 and post2, so this in my routing

{path: 'menu',
  children:
  [
    { path: ':id',      pathMatch:'full', component:  DishComponent },
    { path: ':id/**',    pathMatch:'full', component:  DishComponent }
  ]
},
{
  path:'**',
  redirectTo:'404'
}

Well, /menu/12/helloworld ends into 404

CodePudding user response：

  {
    path: 'menu/:id',
    children: [{ path: '**', component: DishComponent }],
  },

A path is only wildcard when it's exactly '**'

path: 'menu/**' literally matches to mywebsite.com/menu/** and nothing else

Also you only have to use pathMatch: 'full' when there's a concern that the default pathMatch: 'prefix' will trigger unintentionally, which doesn't seem like the case here.