typescript - Angular 2 importerar en annan "syskon"-modul injicerar fel komponent

Så jag har en modulstruktur som ser ut så här:

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

Både dashboard och posts har sin egen routning.

Här är hur routningen ser ut:

Sidor

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);

Instrumentpanel

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

export const routing = RouterModule.forChild(routes);

Inlägg

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

Allt fungerar bra men när jag försöker importera PostsModule i DashboardModule på detta sätt:

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

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

och ladda http://localhost:3000/#/dashboard, det visar PostsComponent, istället för DashboardComponent bara för att jag importerade "syskon"-modulen

Hur kan jag fixa detta?

Svar #1

Det verkar för mig som att genom att ladda PostsModule in i DashboardModule, importerar du också PostModule-rutterna, vilket är fel. Eftersom ordningen på ruttdefinitionerna är viktig, placeras den felaktiga komponenten på sidan

Utan att se de fullständiga modulerna är det omöjligt att säga vad din avsedda design är. Jag skulle dock separera alla gemensamma tjänster och komponenter från PostsModule till en PostsCommonModule:

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

vilket sedan kan importeras av både PostsModule och 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 { }