You will need to specify a route under your module will be executed.
Note that all lazy-loaded module must follow these three rules.
- The module which you want to lazy load they should have one parent route.
- Dont import module in your
app.module.ts. Because if you do then no point of lazy loading
- Your will need to configure under one route in your
app.routes.
So to answer your question you will need config like this..
{
// Login Module
path: 'login', loadChildren:'app/login/login.module#LoginModule';
// Register Module ,
path:'register', loadChildren: 'app/register/register.module#LoginModule'
// Dashboard Module
path:'dashboard', loadChildren:'app/dashboard/dashboard.module#dashboardModule'
// User Profile Module
path:'profile', loadChildren:'app/user-profile/user-profile.module#UserProfileModule'
}
So whenever you will hit login route it will load the #LoginModule. In your login module should export routes like this
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: YourComponentToLoad
}
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule {
}
Also, in your app-routing.module.ts you can define preloading strategy as following so that after the app is initialized, lazy modules will start loading immediately. So, when user clicks on a link and wants to see a lazy loaded module, it'll be ready.
app-routing.module.ts
@NgModule({
imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
exports: [RouterModule]
})
export class AppRoutingModule {
