Angular routing with parameter not working

Question

I've installed the new SPA templates for .NET Core, and created a new Angular project. Here is a link if you're interested to give it a go. It comes with an example of routing. Now I am trying to get routing to work with a parameter, but I am having difficulty getting it to work.

In app.module.ts, I am defining the path as follows (with a parameter):

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'fetch-data:id', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }

And this is how I am defining the router link:

<a [routerLink]="['/fetch-data',3]">
    <span class='glyphicon glyphicon-th-list'></span> Fetch data by ID
</a>

The path shows correct when I hover over the link, but when I click on it, it takes me back to home. I thought maybe it is conflicting with the path above it so I deleted the following line, but still it doesn't work:

{ path: 'fetch-data', component: FetchDataComponent },

Answer 1

Change

{ path: 'fetch-data:id', component: FetchDataComponent },

To

{ path: 'fetch-data/:id', component: FetchDataComponent },