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

Question

I can't get the routing of a lazy loaded module working. Please have a look at this stackblitz , it's a copy from the Angular lazy loading example with a few changes.

• First of all, the lazy loading itself seems to be working correctly
• If I click the "orders" button the module is (lazy) loaded and the correct component is being displayed ( OrdersComponent )
• However, clicking "Orders Child" also displays the orders component (instead of the OrdersComponent2 )
• When I un-comment the pathMatch: 'full' in the child route configuration I'll get an error Error: Cannot match any routes. URL Segment: 'orders/child' Error: Cannot match any routes. URL Segment: 'orders/child' for the child route

What am I doing wrong here?

Answer 1

you should not use pathMath: full when you have child-cmps.

There are two possibilities

1. add a router-outlet to your orders component if your orders2 should be nested within the orders component.

<p>
  orders works!
</p>

<router-outlet></router-outlet>

2. move the orders component to children:

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

EDIT:

or remove children and setup like this:

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

let me know if this helps

Answer 2

You defined OrdersComponent2 as a child route to OrdersComponent : this has nothing to do with lazy loaded modules. They belong to the same module, that is lazy loaded once you navigate to /orders .

What you're doing by clicking the "Order Child" button is navigating to the child route /orders/child : for that to work you need a <router-outlet> in the orders.component.html template . That outlet will be used by Angular to display the child view.

Updated Stackblitz

Answer 3

In your orders-routing-module.ts, the problem is where you specify the path:

path: "child",

There are no components with the selector "app-child", so it will give you the "cannot match any routes" error. Your orders.component.ts has the child component with selector "app-orders-2", so try this path and the error should disappear and the content show:

path: "orders-2",