[延迟加载导致ERROR错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：

Question

我实现了延迟加载，并导致出现此错误。我看过很多帖子，但都没有给出解决方案。

如何复制：

1. 转到https://stackblitz.com/edit/angular-sxmpj8
2. 点击订单标签
3. 点击测试

预期：它将打开测试组件实际：结果为“未捕获（承诺）：错误：无法匹配任何路由。URL段：”错误

我正在尝试延迟加载具有两个组件订单和测试的订单模块。订单路线运行正常，但测试组件路线引发错误。

应用程序位于https://stackblitz.com/edit/angular-sxmpj8

在orders-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>

将这个结果点击错误

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“测试”错误：无法匹配任何路线。网址段：“测试”

Answer 1

首先，routerLink应该是相对路径，否则它将到达应用程序的根目录，并且在应用程序路由中没有定义/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

尝试一下：

Answer 3

您需要添加routerLink="/orders/test"，而不仅仅是routerLink="/test"。另外，您还需要添加orders.component.html以显示testComponent的视图。

Answer 4

有两个问题：