I have a situation where our main app lazily loads other modules:
//main NgModule
RouterModule.forRoot(
[
{path:'profile', loadChildren:'path/to/profile.module#ProfileModule},
{path:'classroom', loadChildren:'path/to/classroom.module#ClassroomModule},
{path:'tests', loadChildren:'path/to/test.module#TestsModule}
])
Now the profile module has a few components in it that are necessary for the Classroom module.
//Profile NgModule
RouterModule.forChild(
[
{path:'', component:ProfileComponent,
])
//Classroom NgModule
imports: [
ProfileModule,
RouterModule.forChild(
[
{path:'', component:ClassroomComponent} //this requires a component in ProfileModule
])
]
This compiles nicely but when I try to navigate to '/classroom' all I get is the ProfileComponent
I suppose this is because the ProfileModules route configuration is being combined with the ClassroomModule route configuration. Is there a way I could prevent this from happening? I'd prefer not having to remove all of the shared components from ProfileModule and putting them into a new shared module if possible.