Angular Routing on root path with parameter

Question

I'm trying to configure the paths on my angular routes to have an ID paramter on the empty root path. For example localhost:4200/123 where as my current working code works like localhost:4200/view/123

Here is my current working routes

const routes: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: 'main', component: MainComponent},
  {path: 'view/:id', component: ViewComponent},
];

Ideally I want to scrap the /view/ part of the path.

I've tried

const routes: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: '/:id', component: ViewComponent},
  {path: 'main', component: MainComponent},
];

with combinations of dropping the forward slash.

I've also tried

const routes: Routes = [
  {path: '', redirectTo: 'main', pathMatch: 'full'},
  {path: '/:id', redirectTo: 'view', pathMatch: 'full'},
  {path: 'main', component: MainComponent},
  {path: 'view', component: ViewComponent},
];

With combinations of dropping the forward slash and adding /:id to {path: 'view', component: ViewComponent},

When the I try the previously non-working routes, the page comes out blank and no errors in the console.

Using Angular 5.2.0

Answer 1

It should be something like this.

const routes: Routes = [
    { path: ':id', component: HomeComponent },
    ......
];