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.