Angular 2+ Router – Lazy load children


I’m trying to implement lazy loading on children route (which is already lazy loaded) without success.

I have the following route structure:

const routes: Routes = [
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
    path: '',
    redirectTo: '',
    pathMatch: 'full'

And the CustomersModule route:

const routes: Routes = [
    path: '',
    component: CustomerListComponent,
    children: [
        path: 'orders',
        loadChildren: 'app/orders/orders.module#OrdersModule'

If I try to navigate from CustomerListComponent to the path “/customers/orders” nothing happens.

Can anyone help me? I created an stackblitz sample to demonstrate it:

The idea behind it is that I want to have a central component (in this case Customer) and from there, I want to navigate to other components, using the same router outlet, thus keeping sidebars/toolbars/etc visible to the user.

Hopefully that is clear enough.



You need to router-outlet in your custome.html as below :

  customer-list works!

<!-- <button routerLink="/orders">Orders</button> -->

<button (click)="onNavigateClick()">Orders</button>

Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at


Answered By – Ishant Gaurav

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.