Routing for Nested Modules in Angular 2 RC5 / Router 3 RC1

Question

Let's say I have the following setting:

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 would like my routes to look like

 employee/14/sales 

So, I continue 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 {} 

Now i can switch to

 employee/14 

but if I try to go to

 employee/14/sales 

Greetings

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

I can, however, enter

 sales 

and this works until it should work, so somehow all the routes connect directly to / instead of building on each other.

What am I missing?

EDIT plnkr showing the problem can be found here .

Answer 1

In the end, I got it to work. The key idea is not to include employeeRoutes from employee.routing.ts (as this will add material from EmployeeModule declarations to the AppModule and result in another error message), but instead create another employeeRoutes inside app.routing.ts that will be lazy when loading EmployeeModule when navigating a route starting with `

 /employee 

Here is 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 }); 

Full plnkr can be found here .