I'm using RC5's NgModule to do dynamic route loading.
My app has two depth level. I have routes like :
- app/login
- app/dashboard/module1
- app/dashboard/module2
- etc...
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
app.component.ts
The
<router-outlet>
where/login
and/dashboard
are going to be laid out.app.routes.ts
loadChildren
point to the module to be loaded on demand.dashboard.module.ts
dashboard.component.ts
<router-outlet>
where/dashboard/accounts
and/dashboard/transfert
are going to be laid-out. You should not name the router-outletdashboard.routes.ts
children
ensures that children routes are loaded in current<router-outlet>
i.e. dashboard's router-outleraccounts.module.ts
accounts.routing.ts
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
That is it. You should have all you need to structure your 'load as you go' application. Hope it helps.