I have a module with the routes of my app. One of this routes is a lazy loading module.
The problem is that this lazy loading module haves inside a routes for child components. But on my router config this routes don't appears... So when i call the lazy module don't show anything on my screen.
Here is my router config (main module):
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},
{ path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
.
.
.
On my lazy module:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
.
.
.
@NgModule({
imports: [
SharedModule,
.
.
.
RouterModule.forChild(MODULE_CALENDAR_ROUTES)
If i print my router config this routes declaren on my lazy module don't show:
Routes: [
{
"path": "dashboard",
"canActivate": [
null
]
},
{
"path": "calendar",
"loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
"canActivate": [
null
]
},
{
"path": "**",
"pathMatch": "full"
},
{
"path": "dashboard"
}
]
Can you help me?
If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.
Lazy loaded routes need to be outside of the root app module. You will want to have your lazy loaded features in feature modules. First, let's use Angular CLI to create a new project with Angular Router: ng new angular-lazy-loading-example --routing --style=css --skip-tests.
Use LoadChildren:For lazy loading. Using this property will optimize your application's performance by only loading the nested route subtree when a user navigates to a particular URL that matches the current route path. It helps in keeping the nested routes table separate.
What is Lazy Loading? Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
The problem was with the way I've declared my route on my lazy module:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar',
component: CalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '',
component: MainCalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user',
component: EditEventComponent,
canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
The path
of CalendarComponent
had to change from:
path: 'calendar', // wrong
component: CalendarComponent,
...
to the below:
path: '', // right
component: CalendarComponent,
...
Thanks to @jotatoledo on gitter that help me to solve this.
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