How to fix routes in angular

Question

Getting below error while using angular and md bootstrap.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'About'

Error: Cannot match any routes. URL Segment: 'About' at enter code

HTML

<li class="nav-item"> 
    <a class="nav-link waves-light" routerLink='/About' mdbWavesEffect>About US</a> 
</li>

MODULE TS

import { AppRoutingModule } from './app-routing.module'; 

const appRoutes: Routes = [ 
    { path: 'home', component: HomeComponent , pathMatch: 'prefix'}, 
    { path: 'about', component: AboutComponent , pathMatch: 'prefix'}, 
    { path: 'contact', component: ContactComponent , pathMatch: 'prefix'} 
]; 

imports: [ RouterModule.forRoot(appRoutes , { enableTracing: true }), ]

at <li class="nav-item"> <a class="nav-link waves-light" routerLink='/About' mdbWavesEffect>About US</a> </li> app.module.ts: import { AppRoutingModule } from './app-routing.module'; const appRoutes: Routes = [ { path: 'home', component: HomeComponent , pathMatch: 'prefix'}, { path: 'about', component: AboutComponent , pathMatch: 'prefix'}, { path: 'contact', component: ContactComponent , pathMatch: 'prefix'} ]; imports: [ RouterModule.forRoot(appRoutes , { enableTracing: true }), ] — Koushik Suripeddi

Smokey Dawson Smokey Dawson · Accepted Answer · 2019-08-05T04:04:43

First off your html should look like this

<a class="nav-link waves-light" [routerLink]="['/about']" mdbWavesEffect>About Us</a>

notice also how /about is spelt with a lower case a and not a capital like in your example

routes are case sensitive! this should fix your problem

For more information on angular routing you can go here

How to fix routes in angular

1 Answers