延迟加载模块路由的子项不起作用

Question

我无法使惰性加载模块的路由正常工作。请查看此 stackblitz, it's a copy from the Angular lazy loading example 并进行一些更改。

首先，延迟加载本身似乎工作正常
如果我单击“订单”按钮，模块将（延迟）加载并显示正确的组件 (OrdersComponent)
但是，单击“订单子项”还会显示订单组件（而不是 OrdersComponent2）
当我在子路由配置中取消注释 pathMatch: 'full' 时，子路由 Error: Cannot match any routes. URL Segment: 'orders/child' 会出现错误

我做错了什么？

Answer 1

当你有 child-cmps 时，你不应该使用 pathMath: full。

有两种可能

如果您的 orders2 应该嵌套在 orders 组件中，请将路由器出口添加到您的 orders 组件。

<p>
  orders works!
</p>

<router-outlet></router-outlet>

将订单组件移至子组件：

const routes: Routes = [
  {
    path: "",
    children: [
      {
        path: "",
        component: OrdersComponent
      },
      {
        path: "child",
        component: OrdersComponent2
      }
    ]
  }
];

编辑：

或像这样删除子项和设置：

const routes: Routes = [
  {
    path: "",
    component: OrdersComponent
  },
  {
    path: "child",
    component: OrdersComponent2
  }
];

如果有帮助请告诉我

Answer 2

您将 OrdersComponent2 定义为 OrdersComponent 的子路由：这与延迟加载模块无关。它们属于同一个模块，一旦您导航到 /orders.

就会延迟加载

您通过单击“订购子项”按钮所做的操作是导航到子路径 /orders/child：为此，您需要 orders.component.html template 中的 <router-outlet>。 Angular 将使用该出口显示子视图。

Updated Stackblitz

Answer 3

在您的订单-路由-module.ts中，问题出在您指定路径的地方：

path: "child",

没有带有选择器“app-child”的组件，所以它会给你“无法匹配任何路由”的错误。您的 orders.component.ts 具有带选择器的子组件 “app-orders-2”，所以尝试这个路径，错误应该消失并且内容显示：

path: "orders-2",

延迟加载模块路由的子项不起作用

Children of Lazy Loaded Modules routes don't work

angular

url-routing

angular-router