I've been attempting to implement lazy loading on a children route that is already lazy loaded, but I haven't had any success so far.
Here is the route structure I am working with:
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
And here is the CustomersModule route:
const routes: Routes = [
{
path: '',
component: CustomerListComponent,
children: [
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
}
]
}
];
When I try to navigate from CustomerListComponent to the path "/customers/orders", nothing happens.
Is there anyone who can assist me with this issue? I have prepared a stackblitz sample to showcase the problem:
https://stackblitz.com/edit/angular-thj13j
The concept I am aiming for is to have a central component (Customer in this case) from which I can navigate to other components while using the same router outlet to ensure sidebars, toolbars, etc. remain visible to the user.
I hope this explanation is clear enough.
Thank you