I encountered an issue with my routes module where I am receiving the error message
Cannot match any routes. URL Segment: 'edit-fighter'
when attempting to navigate using the <a>
link. The only route that seems to work is the champions-list
route, while the others result in errors.
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 { }