Angular 子模块中的多条路由

Question

If I have a Angular module, with these routes

const routes: Routes = [
  {path: 'route1', children: [
    {path: '', component: route1Component}
  ]},
  {path: 'route2', children: [
    {path: '', component: route2Component}
  ]},
  {path: 'route3', children: [
    {path: '', component: route3Component}
  ]}
];

how can I then use the routes in a parent module, where I would lazy load. Normally I would do something like this

{path: 'route1', loadChildren: () => import('../child.module').then(m => m.ChildModule)}

but that normaly implies that the child route has a default route, and here I have 3

I would like to just import the module, and get all the routes from that module

Answer 1

you have to provide any one route as default to the router in lazy loaded. So I would suggest to just define the default router and redirect it to the first route.

So you can have the following code:

const routes: Routes = [
 {path:''',redirectTo:'route1',pathMatch:'full'},
  {path: 'route1', children: [
    {path: '', component: route1Component}
  ]},
  {path: 'route2', children: [
    {path: '', component: route2Component}
  ]},
  {path: 'route3', children: [
    {path: '', component: route3Component}
  ]}
];

This would resolve your issue of not defining any default router.