Angular 2 importing another "sibling" module injects the wrong Component

Question

So I have a module structure like this:

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

Both dashboard and posts have their own routing.

Here is how the routing looks like:

Pages

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

Posts

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

Everything works fine but when I try to import the PostsModule in the DashboardModule like this:

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

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

and load http://localhost:3000/#/dashboard, it shows the PostsComponent, instead of DashboardComponent just because I imported the "sibling" module

How can I fix this?

score 4 · Accepted Answer · answered Feb 03 '17 at 18:38

It seems to me that by loading the PostsModule into the DashboardModule, you are also importing the PostModule routes, which is incorrect. Because the order of the route definitions matters, the incorrect component is placed in the page

Without seeing the full modules, it's impossible to say your intended design. However, I'd separate any common services and components from the PostsModule into a PostsCommonModule:

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

with can then be imported by both PostsModule and 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 { }

Angular 2 importing another "sibling" module injects the wrong Component

1 Answers1