Error: Cannot match any routes (Angular 7)

Question

Hi I'm having trouble configuring the routing in my angular app. I keep getting the error 'Cannot match any routes' so I'm guessing something isn't configured properly.

I am trying to make it so when the user clicks a persons name from a table it will take them to a new route (detail/ID) which then displays that specific persons information.

Here is my code:

Runner-list.HTML - Where the user will click the name

<h2 class="text-center">{{title}}</h2>
<div class="container">
  <table class="table table-striped">
    <thead class="thead-dark">
    <tr>
      <th scope="col">Runner Name</th>
      <th scope="col">UKAN Number</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let runner of myRunners | paginate: {itemsPerPage: 10, currentPage: p }">
      <td><a routerLink="/detail/{{runner.RunnerUKAN}}">{{runner.RunnerName}}</a></td>
      <td>{{runner.RunnerUKAN}}</td>
    </tr>
    </tbody>
  </table>
  <pagination-controls class="text-center" (pageChange)="p = $event"></pagination-controls>
</div>

app-routing module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RunnerDetailsComponent} from './runner-details/runner-details.component';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [
  { path: 'detail:/id', component: RunnerDetailsComponent }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Runner Details ts file (The information to be displayed upon clicking)

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';

import {RunnersService} from '../model/runners.service';

@Component({
  selector: 'app-runner-details',
  templateUrl: './runner-details.component.html',
  styleUrls: ['./runner-details.component.css']
})
export class RunnerDetailsComponent implements OnInit {

  Runner: any;

  constructor(
    private route: ActivatedRoute,
    private RuService: RunnersService,
    private location: Location
  ) { }

  getHero() {
    const id = +this.route.snapshot.paramMap.get('detail');
    this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
  }

  getRunner(id) {
    this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
  }

  ngOnInit() {
    this.getHero();
  }

}

If any other file is needed let me know.

Appreciate any help

Answer 1

Path should be 'detail/:id', not 'detail:/id'

Check this link for more information: https://angular.io/guide/router