Lazy Loading results in ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

Question

I implement lazy loading and result into this error. I have seen many post and none of them are giving the solution.

How to reproduce:

Go to https://stackblitz.com/edit/angular-sxmpj8
Click on orders tab
Click Test

Expected: It opens Test component Actual: It results into "Uncaught (in promise): Error: Cannot match any routes. URL Segment:" error

I am trying to lazy load the orders module which has two components orders and test. The orders route is working fine but the test component route throws error.

The application is at https://stackblitz.com/edit/angular-sxmpj8

At orders-routing.module.ts the routes are defined as below:

    const routes: Routes = [
  {
    path: '',
    component: OrdersComponent,

    children: [
      { path: 'test', component: TestComponent
  }]
  }
];

The routes at app-routing.module.ts are defined as below.

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
   path: 'orders',

   // Tried this also
   // loadChildren:  './orders/orders.module#OrdersModule'
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

In orders.component.ts file I have an entry

<button routerLink="/test">Test</button>

Clicking this result into error

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

@Ningomba i know what you are wroing but i don't uderstand what do you want? if click test the user where have to go? — Doflamingo19
– Doflamingo19, Commented Feb 19, 2020 at 15:00

Kyler Johnson · Accepted Answer · 2020-02-19 15:12:49Z

1

There are two problems:

Because your test component is setup as a child route, you need a module-level <router-outlet> so that the Angular router knows where to render your test component.
On your "test" button, you need to specify the entire route (including /orders).

I forked your stackblitz so you can see it working here => https://stackblitz.com/edit/angular-sxmpj8-q9xzzv

answered Feb 19, 2020 at 15:12

Kyler Johnson

2,25420 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyler Johnson Over a year ago

Awesome! Glad to help!

Poul Kruijt · Accepted Answer · 2020-02-19 15:08:03Z

1

First the routerLink should be a relative path, otherwise it will go to the root of the app, and there is no /test path defined at the app routes. A relative path in a routerLink is relative to the current router-outlet the routerLink is defined in.

Second, the orders.component.html also needs a <router-outlet></router-outlet>, otherwise the test component won't be placed anywhere.

Something like this:

<button routerLink="test">Test</button>
<router-outlet></router-outlet>

working example

edited Feb 19, 2020 at 15:08

answered Feb 19, 2020 at 15:00

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Comments

Sats · Accepted Answer · 2020-02-19 15:33:47Z

1

You need to add routerLink="/orders/test" instead of just routerLink="/test". Also you need to add <router-outlet></router-outlet> in the orders.component.html to show the testComponent's view.

Change in orders.component.html

     <p>
      orders works!
    </p>

    <button routerLink="/orders/test">Test</button>
    <router-outlet></router-outlet>

Hope this helps !!

edited Feb 19, 2020 at 15:33

answered Feb 19, 2020 at 15:06

Sats

1,9711 gold badge16 silver badges21 bronze badges

2 Comments

Sats Over a year ago

@Ningomba checkout the solution.

Sats Over a year ago

@Ningomba glad was able to help you :)

Doflamingo19 · Accepted Answer · 2020-02-19 15:03:14Z

0

try this:

<button routerLink="/orders">Test</button>

and after modify this in order-routing module:

const routes: Routes = [
  {
    path: '',
    component: OrdersComponent
  }
]
  }
];

answered Feb 19, 2020 at 15:03

Doflamingo19

1,6395 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

Lazy Loading results in ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related