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' 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 { }

Krishna Rathore · Accepted Answer · 2018-08-18 11:19:21Z

1

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>

answered Aug 18, 2018 at 11:19

Krishna Rathore

9,7475 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket Avhad · Accepted Answer · 2018-08-18 11:17:55Z

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

answered Aug 18, 2018 at 11:17

Aniket Avhad

4,1453 gold badges25 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular: Cannot match any routes. URL Segment

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related