I have defined my route as follows:

{ path: 'productDetails/:id', component: ProductDetailsComponent }

In my view, I have a area to load my productDetails component when a link is clicked:

<li *ngFor="let product of category.Products">
    <a [routerLink]="['/productDetails', product.ProductId]">{{product.Name}}</a>
</li>

I am getting a weird behaviour where only the first time I click on any of the links that the component gets loaded. It doesn't matter which link as long as it is the first time. Any of the links work but after the first time, none of them work again. So I only have my productDetails component load the one time and then routing stops. The links show the correct route path on hover.