Angular2 RC6 - Nested modules with routing

From my reading of the docs, and my own experience with similar routing, what you have done seems to agree with Angular's recommended style.

I just came across this discussion on the Angular github. I haven't tried it yet but it looks like the link provides a better way of doing this.

I'll get back here when I have tried it out.

---

Following the instructions in the link I first got this working WITH lazy loading – because that's what I really wanted anyway.

I'm not sure which way you are looking for.

With lazy loading it goes like this:

My Hierarchy is

|--App
|    Home
|    Costing
|    |  Payments
|       |   Payments List
|       |   Payments Detail
|    |  Variations
|       | ...
|    Admin
|    |--Projects
|       |...
|    |--Users
|       |...
|  ...

Where Costing, Payments, Variations, Admin, Projects and Users are all modules.

My app.routing then looks like this:

export const appRoutes: Routes =[
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  {
    path: 'home',
    component: HomeComponent
  },

  { path: 'costing', loadChildren: 'app/costing/costing.module#CostingModule' },

  { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },

];

export const appRoutingProviders: any[] = [
  authProviders,
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

costing.routing is:

const routes: Routes = [

  {
    path: '', component: CostingComponent,
    children: [

     { path: '', component: EmptyComponent, pathMatch: 'full' },
     { path: 'payments', loadChildren: 'app/costing/payments/payments.module#PaymentsModule' },
     { path: 'variations', loadChildren: 'app/costing/variations/variations.module#VaritionsModule' }
    ]
  }
];

export const costingRouting: ModuleWithProviders = RouterModule.forChild(routes);

And finally, payments.routing:

const paymentsRoutes: Routes = [

  {
    path: '',
    component: PaymentsListComponent},
  {
    path: 'detail:id',
    component: PaymentsDetailComponent 
  },

];

export const paymentsRouting: ModuleWithProviders = RouterModule.forChild(paymentsRoutes);

I'm sure you could substitute synchronous loading for my lazy loading.

I guess its really up to you how you want it to be. When ngModules came out, I decided to modularize everything to keep it together. I have a large app with numerous routes. I have placed all main routes to feature modules in the app.routing as such:

import { Routes } from '@angular/router';
import { AuthGuardService } from './services/authGuard.service';

export const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'  },
    { path: 'home',  loadChildren: './app/home/home.module#HomeModule' },
    { path: 'documents',  loadChildren: './app/documents/documents.module#DocumentsModule' },
    { path: 'calculator', loadChildren: './app/calculator/calculator.module#CalculatorModule'},
    { path: 'food',  loadChildren: './app/food/food.module#FoodModule'}, //canActivate: [ AuthGuardService ] },
    { path: 'themes',  loadChildren: './app/themes/themes.module#ThemesModule', canActivate: [ AuthGuardService ] },
    { path: 'settings',  loadChildren: './app/settings/settings.module#SettingsModule', canActivate: [ AuthGuardService ] },
    { path: 'about',  loadChildren: './app/about/about.module#AboutModule' }

];

export const appRoutingProviders: any[] = [];

Then in each feature module I do this, for example: home.routing.ts:

export const routing = RouterModule.forChild([
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'verify', component: VerifyComponent },
  { path: 'challenge', component: ChallengeComponent },
  { path: 'verifyEmail/:id', component: VerifyEmailComponent },
  { path: 'change', component: ChangeComponent },
  { path: 'forgot/:id', component: ForgotComponent },
  { path: 'verifyPassword/:id', component: ForgotVerifyComponent },
  { path: 'verifyUserName/:id', component: ForgotVerifyComponent }
]);

I do this with each feature module and I have no trouble with routing and it keeps it modular.