延迟加载导致 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>

点击这个结果报错

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

Answer 1

有两个问题：

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

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

Answer 2

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

其次，orders.component.html 也需要<router-outlet></router-outlet>，否则测试组件不会放在任何地方。

类似这样的：

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

working example

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

试试这个：

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

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

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