CODEWITHSUNDEEP
angulartypescriptangular-ui-router
HobojoeBr
HobojoeBr

Reputation: 619

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:

https://stackblitz.com/edit/angular-thj13j

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.

Thanks

Upvotes: 0

Views: 435

Answers (1)

Ishant Gaurav
Ishant Gaurav

Reputation: 1203

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

<p>
  customer-list works!
</p>

<!-- <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 http://angular.io/license
-->

<router-outlet></router-outlet>

Upvotes: 3

Related Questions