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.

How do you navigate to `employee/14/sales` and from where? routerLink? If yes what component contains it? Have you tried `/employee/14/sales` instead? — Günter Zöchbauer, Aug 16 '16 at 09:39
No, I have that issue in a largish project so I built a quick sample application to be able to reproduce it; within that sample app I simply type in the browser address bar like `http://localhost:3000/#/employee/14/sales` — Thorsten Westheider, Aug 16 '16 at 09:45

score 4 · Accepted Answer · answered Aug 18 '16 at 06:46

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.

thanks for pointing to the right direction which I had overlooked at https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component — ZZZ, Nov 21 '16 at 22:01

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

1 Answers1