Routing for nested modules in Angular 2 RC5/Router 3 RC1

Question

Let's say I have the following setup:

employee -------+ employee.module.ts
                | employee.routing.ts
                + employee.component.ts
                |
sales ----------+ sales.module.ts
                | sales.routing.ts
                + sales.component.ts
app.module.ts
app.routing.ts
app.component.ts

and I'd like my routes to look like

employee/14/sales

So I go ahead and define these routing declarations:

app.routing.ts

...
import { AppComponent } from './app.component';

const appRoutes: Routes = [
    { path: '', component: AppComponent }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

employee.routing.ts

...
import { EmployeeComponent } from './employee.component';

export const employeeRoutes: Routes = [
    { path: 'employee/:id', component: EmployeeComponent }  
];

export const employeeRouting = RouterModule.forChild(employeeRoutes);

sales.routing.ts

...
import { SalesComponent } from './sales.component';

export const salesRoutes: Routes = [
    { path: 'sales', component: SalesComponent }  
];

export const salesRouting = RouterModule.forChild(salesRoutes);

while my modules take this form:

app.module.ts

import { EmployeeModule } from './employee/employee.module';
import { AppComponent } from './app.component';

import {
    routing,
    appRoutingProviders
} from './app.routing';

@NgModule({
    imports: [
        ...
        EmployeeModule,
        routing
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ],
    providers: [
        appRoutingProviders
    ]
})

employee.module.ts

import { SalesModule } from '../sales/sales.module';
import { EmployeeComponent } from './employee.component';
import { employeeRouting } from './employee.routing';

@NgModule({
    imports: [
        SalesModule,
        employeeRouting
    ],
    declarations: [
        EmployeeComponent
    ]
})

sales.module.ts

import { SalesComponent } from './sales.component';
import { salesRouting } from './sales.routing';

@NgModule({
    imports: [
        salesRouting
    ],
    declarations: [
        SalesComponent
    ]
})
export class SalesModule {}

I can now move to

employee/14

but if I try to navigate to

employee/14/sales

I'm greeted with

Error: Cannot match any routes: 'employee/14/sales'

I can, however, enter

sales

and that works while it isn't supposed to work, so somehow all routes connect directly to / instead of building on top of each other.

What am I missing?

EDIT plnkr demonstrating the issue can be found here.

Answer 1

I eventually got this to work. The key idea is not to include employeeRoutes from employee.routing.ts (as that will add stuff from EmployeeModule to AppModules declarations and result in yet another error message) but instead to create another employeeRoutes inside app.routing.ts that will lazy load EmployeeModule when navigating to a route starting with`

/employee

Here's the relevant code:

import {
    RouterModule,
    Routes
} from '@angular/router';

import { AppComponent } from './app.component';

const employeeRoutes: Routes = [
  {
    path: 'employee',
    loadChildren: 'app/employee/employee.module#EmployeeModule'
  }
];

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    ...employeeRoutes
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

The full plnkr can be found here.