Угловые 2 импорта другого модуля «родственного» впрыскивает неправильный компонент

Question

Так у меня есть структура модуля так:

app 
----pages 
---------dashboard 
---------posts 

Оба dashboard и posts имеют свой собственный маршрут.

Вот как выглядит маршрутизация как:

Страницы

const routes: Routes = [ 
    { 
    path: '', 
    component: Pages, 
    children: [ 
     { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
     { path: 'dashboard', loadChildren: './dashboard#DashboardModule' } 
     { path: 'posts', loadChildren: './posts#PostsModule' } 
    ] 
    } 
]; 

export const routing = RouterModule.forChild(routes); 

Dashboard

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

export const routing = RouterModule.forChild(routes); 

Сообщений

const routes: Routes = [ 
    { 
     path: '', 
     component: PostsComponent 
    }, 
    ... 
]; 
const routing = RouterModule.forChild(routes); 

Все работает нормально, но когда я пытаюсь импортировать PostsModule в DashboardModule как это:

import { PostsModule } from '../posts'; 

@NgModule({ 
    imports: [ 
    routing, // Dashboard routes 
    CommonModule, 
    ... 
    PostsModule 
    ] 
}) 
export class DashboardModule { } 

и нагрузки http://localhost:3000/#/dashboard, он показывает PostsComponent, вместо DashboardComponent только потому, что я импортировал «родственный "модуль

Как это исправить?

Answer 1

Мне кажется, что, загрузив PostsModule в DashboardModule, вы также импортировать PostModule маршрутов, что является неправильным. Поскольку порядок определений маршрута имеет значение, неправильный компонент размещен на странице

Не видя полных модулей, невозможно сказать, что ваш намеченный дизайн. Тем не менее, я бы отделить какие-либо общие услуги и компоненты из PostsModule в PostsCommonModule:

@NgModule({ 
    declarations: [ 
    //common components 
    ], 
    providers; [ 
    //common service 
    ] 
}) 
export class PostsCommonModule { } 

с потом может быть импортирован как PostsModule и DashboardModule:

import { PostsCommonModule } from './posts-common.module'; 

@NgModule({ 
    imports: [PostsCommonModule] 
    //... 
}) 
export class PostsModule { } 

//dashboard.module 

import { PostsCommonModule } from '../posts/posts-common.module'; 

@NgModule({ 
    imports: [PostsCommonModule] 
    //... 
}) 
export class DashboardModule { }