Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: Cannot match any routes. URL Segment: '' in angular 7

Tags:

angular

routes

I want to use routerLink in angular 7 app.

app.routingts.ts

const routes: Routes = [  
{
  path: '',
  component: AdminComponent,
  children: [     
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' }
  ]
 }
];

admin html

<app-nav></app-nav>
<router-outlet></router-outlet>

dashboard html

<app-nav></app-nav>
<router-outlet></router-outlet>

HTML from nav component

<a class="nav-link" [routerLink]="['/drivers']">Drivers<span class="sr-only">

Folder

Error

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'drivers'
Error: Cannot match any routes. URL Segment: 'drivers'
like image 845
khushboo Avatar asked Dec 10 '18 17:12

khushboo


People also ask

What is the error code for cannot match any routes?

URL Segment: 'connect/authorize' #559 Prod mode Error: Cannot match any routes. URL Segment: 'connect/authorize' #559

Why are my route path names not matching my url's?

The route path names are case sensitive (as of right now anyway). They won't match what's in your URL otherwise, and with typical MVC controller/action naming, they are "InitialCaps-style." Check the imports session at the app.module.ts and look you did't miss the routing:

Are the route path names case sensitive?

The route path names are case sensitive (as of right now anyway). They won't match what's in your URL otherwise, and with typical MVC controller/action naming, they are "InitialCaps-style." Show activity on this post.


1 Answers

Try this

Adminrouting

 const routes: Routes = [  
 {
  path: '',    
  component: AdminComponent,
  children: [
    { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'drivers', loadChildren: './drivers/drivers.module#DriversModule' },
  ]
 }
];

HTML

<a class="nav-link" [routerLink]="['drivers']">Drivers<span class="sr-only">

admin.component.html

<app-nav></app-nav>
<router-outlet></router-outlet>

app.routing

{ path: 'admin' , loadChildren:'./admin/admin.module#AdminModule'},
like image 71
Sachin Shah Avatar answered Oct 15 '22 17:10

Sachin Shah