I have question about the lazy loading. Using Augury to detect my router tree structure.
app-routing.module.ts
const routes: Routes = [
{
path: '',
children: [
{
path: 'reservation',
loadChildren: () => import('./modules/reservations/reservations.module').then(mod => mod.ReservationsModule)
},
{
path: 'add',
loadChildren: () => import('./modules/add-autopoint/add-autopoint.module').then(mod => mod.AddAutopointModule)
},
{
path: 'availability',
loadChildren: () => import('./modules/availability/availability.module').then(mod => mod.AvailabilityModule)
},
{
path: 'archive',
loadChildren: () => import('./modules/archive/archive.module').then(mod => mod.ArchiveModule)
},
{ path: '**', redirectTo: '/reservation', pathMatch: 'full' },
]
}
];
Example module routing
reservation-routing.module.ts
const routes: Routes = [
{ path: '', component: ReservationComponent },
{ path: 'summary/:id', component: SummaryComponent, resolve: { summary: AtplSummaryResolver, notes: AtplNotesResolver } }
];
app.module.ts
@NgModule({
declarations: [
AppComponent,
FilterPipe,
LoaderComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule,
SharedModule,
NgxMatSelectSearchModule,
FlexLayoutModule,
AddAutopointModule,
ArchiveModule,
ReservationsModule,
AvailabilityModule,
Ng2LoadingSpinnerModule.forRoot({}),
NavigationModule
],
providers: [
CommonService,
AlertService,
ListService,
LoaderService,
MenuService
],
bootstrap: [AppComponent]
})
Is it normal to load these components at first or I'm doing something wrong ?
After I remove these modules :
AddAutopointModule,
ArchiveModule,
ReservationsModule,
AvailabilityModule
from my app.module.ts i fixed my problem with the lazy loading