CODEWITHSUNDEEP
angularangular6
Aydar Omurbekov
Aydar Omurbekov

Reputation: 2117

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

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 { }

Upvotes: 6

Views: 1863

Answers (1)

Syed Sharique
Syed Sharique

Reputation: 56

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.

Upvotes: 4

Related Questions