How can I prevent my imported module from overriding my routes?

Viewed 674

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?

1 Answers

As they answered you, you have a design problem you need to put your shared component in AppModule or in a shared Module.

You can put your component in EntryComponent array.

Related