I'm using RC5's NgModule to do dynamic route loading.
My app has two depth level. I have routes like :
Each deph level has it's own router-outlet so I can define custom layout at each level. i.e. login and dashboard are displayed in app router-outlet while module1 and module2 are displayed in dashboard router-outlet.
What is the configuration to load dynamically each route on demand ?
Here is a minimal working example of dynamic loading accoss NgModules and router-outlet.
app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
RouterModule,
routing],
bootstrap: [AppComponent],
providers: [
// some providers
]
})
export class AppModule { }
app.component.ts
@Component({
template: '<router-outlet></router-outlet>'
})
export class BadAppComponent { }
The <router-outlet>
where /login
and /dashboard
are going to be laid out.
app.routes.ts
export const routes: Routes = [
{path: '', redirectTo: '/login', terminal: true},
{path: 'login', component: LoginComponent},
{path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
loadChildren
point to the module to be loaded on demand.
dashboard.module.ts
@NgModule({
declarations: [
DashboardComponent
],
imports: [CommonModule, RouterModule, routing],
exports: [DashboardComponent],
providers: [
// some providers
]
})
export class DashboardModule { }
dashboard.component.ts
@Component({
moduleId: module.id,
template: '<div>sidebar left</div><router-outlet></router-outlet><div>sidebar right</div>',
})
export class DashboardComponent {
constructor() {}
}
<router-outlet>
where /dashboard/accounts
and /dashboard/transfert
are going to be laid-out. You should not name the router-outlet
dashboard.routes.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{path: '', component: DashboardComponent,
children: [
{ path: 'accounts', loadChildren: 'app/dashboard/accounts/accounts.module#DashboardAccountsModule'},
{ path: 'virement', loadChildren: 'app/dashboard/transfert/transfert.module#DashboardTransfertModule'}
]
}
]);
children
ensures that children routes are loaded in current <router-outlet>
i.e. dashboard's router-outler
accounts.module.ts
@NgModule({
declarations: [
AccountsFragment
],
imports: [CommonModule, RouterModule, routing],
exports: [AccountsFragment]
})
export class DashboardAccountsModule { }
accounts.routing.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{ path: '', component: AccountsComponent}
]);
This is the end of the route. It will be displayed in the dashboard's router-outlet because is is a children route of dashboard.
accounts.component.ts
@Component({
moduleId: module.id,
template: '<div>Your accounts!!</div>'
})
export class AccountsComponents {
}
That is it. You should have all you need to structure your 'load as you go' application. Hope it helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With