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

Question

我实现延迟加载并导致此错误。我看到很多 post 和 none 给出了解决方案。

如何重现：

转到https://stackblitz.com/edit/angular-sxmpj8
单击订单选项卡
点击测试

预期：它打开测试组件实际：它导致"Uncaught (in promise): Error: Cannot match any routes. URL Segment:"错误

我正在尝试延迟加载具有两个组件订单和测试的订单模块。订单路线工作正常，但测试组件路线抛出错误。

申请在https://stackblitz.com/edit/angular-sxmpj8

命令-routing.module.ts 路由定义如下：

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

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

app-routing.module.ts 的路由定义如下。

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'
  }
];

在 orders.component.ts 文件中我有一个条目

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

点击这个结果出错

错误错误：未捕获（承诺）：错误：无法匹配任何路线。 URL 细分市场：'test' 错误：无法匹配任何路由。 URL 段：'test'

Answer 1

首先routerLink应该是一个相对路径，否则会到app的根目录，app routes中没有定义/test路径。 routerLink 中的相对路径是相对于当前 router-outlet 中定义的 routerLink。

其次，orders.component.html还需要一个<router-outlet></router-outlet>，否则测试组件放不下。

像这样：

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

working example

Answer 2

试试这个：

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

并在订单路由模块中修改后：

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

Answer 3

您需要添加 routerLink="/orders/test" 而不仅仅是 routerLink="/test"。您还需要在 orders.component.html 中添加 <router-outlet></router-outlet> 以显示 testComponent 的视图。

变化 orders.component.html

     <p>
      orders works!
    </p>

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

希望对您有所帮助！！

Answer 4

有两个问题：

因为您的测试组件被设置为子路由，您需要一个模块级 <router-outlet> 以便 Angular 路由器知道在哪里呈现您的测试组件。
在您的 "test" 按钮上，您需要指定整个路线（包括 /orders）。

我分叉了你的 stackblitz，所以你可以看到它在这里工作 => https://stackblitz.com/edit/angular-sxmpj8-q9xzzv

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

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

angular

angular2-routing