Lazy loading feature modules with multiple components doesn't work in angular 6

Question

I have a customer module with customer-routing module:

const routes: Routes = [
  {
    path: '', component: CustomerComponent,
    children: [
      { path: 'edit', component: EditCustomerComponent }
    ]
  }
];

And this is my app-routing module:

const routes: Routes = [
  { path: 'customers/:id', loadChildren: './customer/customer.module#CustomerModule' },
  { path: 'login', component: LoginComponent}
];

But when I follow such path customers/3/edit it shows me always CustomerComponent not EditCustomerComponent.

Maybe lazy loading doesn't work?

PS: I am using angular 6.1.0

Update: My customer module

import {ReactiveFormsModule} from '@angular/forms';
import {CustomerComponent} from './customer.component';
import {EditCustomerComponent} from './edit-customer.component';

@NgModule({
  imports: [
    CommonModule,
    CustomerRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [CustomerComponent, EditCustomerComponent]
})
export class CustomerModule { }

@LazarLjubenović Added this config but I dont see anything in console — Aydar Omurbekov
– Aydar Omurbekov, Commented Sep 23, 2018 at 10:58
Do you have a router-outlet inside the HTML of CustomerComponent ? For me the router configuration seem to be fine — xrobert35
– xrobert35, Commented Sep 23, 2018 at 12:11

Syed Sharique · Accepted Answer · 2018-09-23 11:32:37Z

4

You don't have to put edit route under children. Your customer-routing module would simply look like this:

const routes: Routes = [
  { path: '', component: CustomerComponent },
  { path: 'edit', component: EditCustomerComponent }
];

Also make sure to check whether this routes array has been imported using forChild function in your customer-routing module like this:

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomerRoutingModule { }

Hope this should solve your routing issue.

answered Sep 23, 2018 at 11:32

Syed Sharique

561 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lazy loading feature modules with multiple components doesn't work in angular 6

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related