Importing Module without routes

Question

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.

Answer 1

The best way I found to do this was to create a Module which does all the declarations of the original module but without importing the routing.

<Module Name>WithoutRouting.ts 

I then create anther module

<Module Name>.ts 

Where I import the routing and the <Module Name>WithoutRouting.ts module.

Then when I want to use the module with routing, for example when lazy loaded I use <Module Name>.ts and if I want to import the Module directly I use <Module Name>WithoutRouting.ts.

Answer 2

I have encountered a similar issue. All I found is that if you put a module already combined with a RouterModule before the current module's routing module, it will just use the imported module's routing if any path matches the pattern. So make sure your routing module is imported at the very beginning, just after CommonModule maybe, it'll be safer.