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

Question

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">

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'

Solution 1

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

Solution 2

You need to have router configuration like this

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

Template:

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

Solution 3

If you are trying to achieve a URL like this: localhost:4200/admin/drivers

Then your path should look like this:

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

And your link should either be this:

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

For an absolute route or this:

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

for a relative route. (No slash)

Comments

[khushboo]

Thanks for reply, Let me try

[khushboo]

Now it shows Error: Cannot match any routes. URL Segment: 'dashboard/admin/drivers'

[Suresh Kumar Ariya]

what is the dashboard. can you please create stackblitz. will help to fix it.

[khushboo]

because I have put <app-nav> in dashboard component. And tried to navigate on page.

[Admin]

the solution worked for me. I guess it is b'cs 'empty' path. once the empty path is redirect and first level path have a tag, it works.