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.