Nesting Angular2 RC5 Routes Multiple Files

Question

I\'m trying to understand how I\'m supposed to organize multiple routing files and make them all play nicely together.

My desired routes look like this:

Answer 1

From what I've seen there is currently(RC5) no simple way to setup routes with nested modules. I've implemented a solution described in this Stack Overflow answer:

How to route to a Module as a child of a Module - Angular 2 RC 5

It uses a hybrid of the pre-RC5 routing (exporting the Routes object instead of RouterModule.forChild) and the current RC5 ngModule setup. Unfortunately it forces you to list the child router component in your parent route config and export ALL components within the child module which obviously is not ideal. But at least you do not have to use the full route path in your child route configs as you have in your example. Also this setup is properly nesting the router-outlets and not reverting to the root router-outlet as you mentioned above.

Some snippets of my configuration:

// parent route config
const routes: Routes = [
{
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
},
{
    path: '',
    component: BaseComponent,
    canActivate: [AuthGuard],
    children: [
        { path: 'home', component: HomeComponent },            
        {
            path: 'admin',
            children: [...adminRoutes]             
        }            
    ]        
}    
];


// child route config (for me, "/admin")
export const adminRoutes: Routes = [
{
    path: '',
    component: AdminComponent,
    children: [
        {
            path: '',
            redirectTo: 'client-list',
            pathMatch: 'full'
        },
        { path: 'client-list', component: AdminClientListComponent, canActivate: [AdminClientListGuard] },
        { path: 'list', component: AdminListComponent },
        { path: 'edit/:id', component: AdminEditComponent }
    ]
}
];

Answer 2

I answered this question at the mentioned How to route to a Module as a child of a Module - Angular 2 RC 5 article. Here is a copy of my answer:

When you are using ngModules and RC5, the routing configuration of your parent module does not need to know anything about the child modules routing. You only have to define the routes for your parent module here. Furthermore you have to import the child module into your parent module. In the child module you have to define your routes this way:

export const childRoutes: Routes = [
  {
    path: 'someChild',
      component: SomeChildComponent,
      children: [
        { path: '', component: SomeChildSubComponent1 },
        { path: 'comp1', component: SomeChildSubComponent1 },
        { path: 'comp2', component: SomeChildSubComponent2 }
      ]
  }
];

This will let you have a url like /someParent/someChild/comp1 - and the components are displayed in their corresponding router-outlet. Please note: You HAVE TO declace a component for the empty path. Otherwise you are not able to navigate to you children.