Angular: Cannot match any routes. URL Segment

Question

I have a simple routes module but I have the error Cannot match any routes. URL Segment: 'edit-fighter' Cannot match any routes. URL Segment: 'edit-fighter' when I click in the <a> link, only works with the champions-list route, the rest I get the error.

app.modules

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChampionsListComponent } from './modules/champions- 
list/champions-list.component';
import { EditFightersComponent } from './modules/edit-fighters/edit- 
fighters.component';
import { AddFightersComponent } from './modules/add-fighters/add- 
fighters.component';

export const routes: Routes = [
  { path: 'champions-list', component: ChampionsListComponent },
  { path: 'edit-fighters', component: EditFightersComponent },
  { path: 'add-fighters', component: AddFightersComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app.component

<h2>COLISEUM MANAGEMENT</h2>
<nav>
  <a routerLink="/champions-list">Champions List</a>
  <a routerLink="/add-fighter">Add Fighter</a>
  <a routerLink="/edit-fighter">Edit Fighter</a>
</nav>
<router-outlet></router-outlet>

app.modules

...
import { routing } from './app.routes';

@NgModule({
 declarations: [...],
 imports: [
   BrowserModule,
   routing
 ],
 providers: [FightersService],
 bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Problem with routerLink naming convention,

You are using path with s charachetr like path=' edit-fighters '

and in your html file, You are using only edit-fighter

add s in routerLink or remove s from path

Answer 2

typo mistake with the name of add-fighter and edit-fighter .

use this template.

<h2>COLISEUM MANAGEMENT</h2>
<nav>
  <a routerLink="/champions-list">Champions List</a>
  <a routerLink="/add-fighters">Add Fighter</a>
  <a routerLink="/edit-fighters">Edit Fighter</a>
</nav>
<router-outlet></router-outlet>