Angular 5 sharing components between lazy loaded modules broken the routing

Question

I am developing somewhat large application using angular 5 with several modules. Each modules has loaded as lazy loading mechanism of Angular 5. I am sharing components between those modules and they are working fine. But I am having an issue with loading module root as follows.

App module routing

export const routes: Routes = [

  { path: '', component: MenuComponent },
  { path: 'logout', component: LogoutComponent },
  { path: 'admin', loadChildren: 'app/modules/admin/admin.module#AdminModule' },
  { path: 'sample', loadChildren: 'app/modules/sample/sample.module#SampleModule' },
  { path: 'membership', loadChildren: 'app/modules/membership/membership.module#MembershipModule' },
  { path: 'class', loadChildren: 'app/modules/class/class.module#ClassModule' },

  { path: '**', component: PageNotFoundComponent }

];

I am sharing components inside ClassModule, in AdminModule.

Class Module

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    ClassRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ClassRoutingComponents,
    ClassHomeComponent,
    ClassListComponent,
    ClassCalendarComponent,
    AddNewCalssComponent,
    ClassScheduleComponent
  ],
  exports: [
    ClassRoutingComponents,
    ClassHomeComponent,
    ClassListComponent,
    AddNewCalssComponent,
    ClassScheduleComponent
  ],
  providers: [

  ]
})
export class ClassModule {}

AdminModule has imported ClassModule as follows.

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    ClassModule
  ],
  declarations: [
    AdminRoutingComponents,
    .......
  ],
  providers:
    [
      AdminService,

    ]
})

export class AdminModule { }

Class Routing

const routes: Routes = [
  { path: '', component: ClassHomeComponent }
];

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

Admin Routing

const routes: Routes = [
  { path: '', component: AdminHomeComponent },
  { path: 'settings', component: SettingsComponent },
...
}

Every components has shared works fine but my problem is when I am routing to http://localhost:4200/admin it loades ClassHomeComponent but it must load AdminHomeComponent

user6775030 · Accepted Answer · 2018-10-16 18:15:53Z

2

ClassModule imports ClassRoutingModule and AdminModule imports ClassModule.

So when you are lazy loading AdminModule (via loadChildren: 'app/modules/admin/admin.module#AdminModule') the router is pulling in routes from ClassModule first, and honoring them. Hence your /admin route is loading the component defined for root in ClassRoutingModule (ClassHomeComponent)

answered Oct 16, 2018 at 18:15

user6775030

811 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 sharing components between lazy loaded modules broken the routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related