My angular application is currently coded in a single app.module.ts file, containing all the components. However, I am facing issues with slow loading times. Is there a way to improve the load time of the application while keeping all the components within the declarations array? I have already tried removing some components from the declarations array and observed a significant improvement in load time, but ideally, I need all the components to be included. Are there any alternative solutions or optimizations that can achieve this without compromising on component inclusion?
app.module.ts
//All imports go here...
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
SatPopoverModule,
RouterModule.forRoot([]),
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
// NoopAnimationsModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
AppRoutingModule,
HttpClientModule,
AceEditorModule,
// Ng2OdometerModule,
// ChartsModule,
// Ng2SearchPipeModule,
NgxShimmerLoadingModule,
// Sub modules
LayoutModule,
// SharedModule
],
declarations: [
AppComponent,
// Include all necessary components here...
],
bootstrap: [AppComponent],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
DashboardService,
TestSuiteService,
AccountService,
Handler,
DatePipe,
AutocodeGeneratorService,
UserVariableService
]
})
export class AppModule {
constructor(public appRef: ApplicationRef) {
}
}