I'm trying to use a component which is part of another module to use in a module. Now I'm having trouble with the routing. There is an unexpected behaviour and I don't find a way to get it to work.
The app-module looks like this
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
AppRoutingModule,
...
],
declarations: [
AppComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
and the routing for the app-module
const appRoutes: Routes = [
{
path: '',
pathMatch: 'full',
},
{
path: '',
component: AdminLayoutComponent,
children: [
{
path: 'scoreboard',
loadChildren: () => import('@app/mode.competition/scoreboard.module').then(m => m.ScoreboardModule),
},
...
],
},
{
path: 'scoreboard-viewer',
component: EmptyLayoutComponent,
children: [
{
path: '',
loadChildren: () => import('@app/mode.competition/components/scoreboard-viewer/scoreboardViewer.module').then(m => m.ScoreboardViewerModule),
},
],
},
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
So far so good. But now I want to use a component of ScoreboardViewerModule in the ScoreboardModule too. So I did:
const routes: Routes = [{ path: '', component: ScoreboardComponent }];
@NgModule({
imports: [CommonModule, RouterModule.forChild(routes), FormsModule, ScoreboardViewerModule],
declarations: [ScoreboardComponent],
exports: [ScoreboardComponent],
})
export class ScoreboardModule {}
But what's happen now when accessing the route to scoreboard is that only the ScoreboardViewerModule is loaded and shown but not the content ScoreboardModule. If I remove the const routes from ScoreboardViewerModule it is shown in Scoreboard correctly, but the "stand-alone" viewer link to the ScoreboardViewerModule doesn't work anymore. What is going wrong?