Search code examples
angularangular-router

Problem calling my Angular application entry point with an ID - Cannot match any routes

So my problem is pretty basic but for some reason, I can't get it to work:

I want my application to be called with an ID. Something like:

myapplication.com/1234 - where 1234 is an ID. Being provided an Id is a must for the start component.

To do this I created two routes:

export const appRoutes: Routes = [
  { path: ':id', redirectTo: 'start', pathMatch: 'full' },
  { path: 'start/:id', component: StartComponent },
];

What I expected the behavior to be is that if someone navigates to myapplication.com/1234 they will be redirected to start and the Id will be provided. However, I keep getting the error Cannot match any routes. URL Segment: '1234'. I do not want to use queryParams (?id=1234) so that is not an option. So my question is what do I need to do to make this work?

Solution

  • Remove redirectTo and define it in following way:

    export const appRoutes: Routes = [
  { path: 'start/:id', component: StartComponent },
  { path: ':id', component: StartComponent },
];

    Both URLs will be resolved to StartComponent and you can handle id value there. You can also handle redirection in StartComponent if you need to.