Angular: No routes found that match the URL segment

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

Answer №1

A small error was found in the name of add-fighter and edit-fighter.

Please follow 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>

Answer №2

Issue with the routerLink naming convention,

The path contains an extra 's' character like path='edit-fighters'

However, in your HTML file, you are using just edit-fighter

Please make sure to either add an 's' in routerLink or remove it from path

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving User's Theme Preference from Local Storage in Next.js Instantly

As mentioned in various other responses, such as this one, Next.js operates on both the client and server side, requiring a guard to properly fetch from localStorage: if (typeof localStorage !== "undefined") { return localStorage.getItem("theme") } else ...

Error message: The value of ngIf has been altered after it has been checked

I am encountering the ngIf value changed error in my code and I'm unsure of the correct solution. Below is the HTML snippet causing the issue: <div *ngIf="currentVlaue"> <div class="section-body"> <div cla ...

The cdkDragMoved event now provides the pointerPosition using the clientX and clientY coordinates rather than the container

I'm currently working on retrieving the x and y coordinates of a box based on its position within the container. Here's an example that I found on https://material.angular.io. To see how the cdkDragMoved event works, you can check out my small d ...

A Guide to Importing Modules in Angular by Assigning Paths to Variables

I am facing an issue with importing my angular module using a variable as the path. For example: When I directly use this code, everything works fine: import('src/app/modules/public/public.module').then(mod => mod.PublicModule); However, wh ...

Creating a Personalized Color Palette Naming System with Material UI in TypeScript

I have been working on incorporating a custom color palette into my material ui theme. Following the guidance provided in the Material UI documentation available here Material UI Docs, I am trying to implement this feature. Here is an excerpt from my cod ...

Tips for widening a union data type in a different section?

Is there a way to expand on a union type from another module? Below is an example showcasing the need for this, but I encountered a ts(3200) error due to duplicate identifiers. The Core module @org/core defines a union type called OptionType: // Defined i ...

ng2-select2 prevent selection of initial value

My Angular project has the following setup: Hello.component.html <select2 ngDefaultControl [data]="list" [options]="{ placeholder: placeholder }" > </select2> Hello.component.ts list = [ { id: 1, text: 'Item 1 one' }, { i ...

Child component in Angular 2 that verifies the parent component

My goal is to have a component behave differently depending on its parent component. For example, in the scenarios below, the child component would exhibit slightly different behavior. Scenario A <parent-a> <child></child> </parent-a ...

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

Installing a 3rd party plugin in Angular using the Angular-cli tool

When attempting to install angular2-grid on my Angular-cli with version 2.0.0-rc.1, I followed the tutorial exactly as described but encountered an error. zone.js:101 GET http://localhost:4200/node_modules/angular2-grid/dist/NgGrid 404 (Not Found)sche ...

"Array.Find function encounters issues when unable to locate a specific string within the Array

Currently, I am utilizing an array.find function to search for the BreakdownPalletID when the itemScan value matches a SKU in the array. However, if there is no match found, my application throws a 'Cannot read property breakdownPalletID of undefined& ...

ABP's Angular DateTimePicker Component for Effortless Date and Time

I am experiencing an issue with a DateTime field that is supposed to display only the time: HTML: <div class='input-group date'> <input class="form-control" type="datetime" #RequiredByDate name="RequiredByDate" [value]="formatDate(h ...

Angular 8 wild card redirect problem with Routable Modals

I have a Modal that can be routed with unique parameters to display Training content defined in the app-routing.module.ts file { path : 'TopshelfContent/:catName/:cmsID', component: ModalContainerComponent, canActivate: [MsalGuard]}, When manua ...

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

I am encountering an error with the onChange event while implementing cleave in typescript. TypeScript is throwing an error indicating that 'rawValue' is not present in event.target. Here is my code: import React, { useCallback, useState, useEff ...

Verify whether an email is already registered in firestore authentication during the signup process using Angular

When a user signs up for our app, I want them to receive immediate feedback on whether the email they are attempting to sign up with already exists. Currently, the user has to submit the form before being notified if the email is taken or not. This desire ...

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Currently, I am developing a project in PHP and utilizing Typescript. I aim to follow a monorepo pattern similar to what NX offers. However, I am facing challenges when attempting to compile typescript for each of my apps. Here is the current structure of ...

Angular: Extracting data from mat select by id

I'm in the process of designing a dynamic form that includes multiple dropdowns (mat-select). The challenge I am facing is that the select element only holds the key and not the actual value. This has left me unsure about how to display the selected v ...

Testing React Hooks in TypeScript with Jest and @testing-library/react-hooks

I have a unique custom hook designed to manage the toggling of a product id using a boolean value and toggle function as returns. As I attempt to write a unit test for it following a non-typescripted example, I encountered type-mismatch errors that I' ...

Is there a way to operate both websocket and http methods concurrently on a server in Typescript?

I have a question regarding running a websocket server with the route "ws://localhost:port" using the 'ws' library. It requires the app instance of 'express' and also features http routes such as "http://localhost:port/auth/login". I am ...

Comprehending and interpreting a visible arrangement

I'm attempting to grasp the structure of observables and seeking guidance on locating the response, error, and complete sections. Additionally, I am curious about identifying the body and header parts in the response of a POST request. To gain insigh ...