Angular loading strategies

Eager Loading?

Eager loading is a technique used in Angular to load a module or component immediately when the application starts. In other words, all the modules and components that are marked for eager loading are loaded upfront, before the user interacts with the application. This can increase the initial load time of the application, but it can improve the overall performance of the application by reducing the time needed to load components when they are required.

by default, Angular uses eager loading for all the components and modules declared in the?AppModule?file. This means that all the components and modules are loaded when the application starts. If you have other modules that are not used in the initial page view, you can use lazy loading or preloading to load them later on when they are needed, and this can improve the application's performance by reducing the initial load time.

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }        

In this example, the?AppModule?file declares two components?HomeComponent?and?AboutComponent, which are marked for eager loading by default. When the application starts, both components will be loaded upfront, before the user interacts with the application.

Eager loading is suitable for small to medium-sized projects with a relatively small number of components and modules. However, for large projects with a complex and hierarchical component structure, eager loading can cause performance issues and slow down the application’s initial load time. When all the components and modules are loaded upfront during the application startup, it can lead to a longer load time, especially if there are a large number of components and modules. This can result in a poor user experience and may cause users to leave the application before it finishes loading. In addition, eager loading can also increase the memory consumption of the application because all the components and modules are loaded into memory, whether or not they are required for the initial view. This can be a problem for large applications with a complex component hierarchy, as it can lead to memory leaks and slow down the application’s performance because Eager loading can affect the main thread of an Angular application by blocking it during the application startup During this time, the main thread of the application is blocked, which means that the user cannot interact with the application until all of the eager-loaded components have been processed and compiled. This can lead to a sluggish and unresponsive application, which can frustrate users and lead to a poor user experience.

To mitigate these issues, Angular provides alternative techniques such as lazy loading and preloading, which can help optimize the loading of components and modules in the application. By using lazy loading and preloading, you can defer the loading of components and modules that are not required for the initial view, and load them only when they are needed. This can help reduce the initial load time and improve the application’s performance.

Pre-Loading?

we need to configure the preloading strategy in Angular to apply preloading. Angular provides a built-in PreloadAllModules strategy, which preloads all lazy-loaded modules after the application initially loads. This strategy can be configured in the app-routing.module.ts file using the?PreloadAllModules?class from the?@angular/router?package.

Here is an example of how to configure the?PreloadAllModules?strategy:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule { }        

In this example, the?PreloadAllModules?strategy is specified as the preloading strategy in the?forRoot?method of the?RouterModule. This means that all the lazy-loaded modules specified in the?routes?array will be preloaded in the background after the application initially loads.

Lazy Loading?

Lazy loading is a technique where the modules and components are loaded on demand when they are required in the application. This means that the modules and components are not loaded when the application initially loads, but rather when they are requested by the user. This technique can improve the performance of the application by reducing the initial loading time. To configure lazy loading in Angular, you need to specify the path to the module that you want to load lazily in the?loadChildren?property of the route definition. The path can be either a relative path or an absolute path to the module file.

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];        

In this example, the?loadChildren?the property specifies the path to the?lazy.module.ts?file, which will be loaded lazily when the user navigates to the?/lazy?path.

To summarize, the main difference in configuration between lazy loading and preloading is that lazy loading requires specifying the path to the lazy-loaded module in the?loadChildren?property of the route definition, while preloading requires specifying the preloading strategy in the?forRoot?method of the?RouterModule.

Preloading is a technique that can be used in conjunction with lazy loading to load modules and components in the background, while the user is interacting with the application. Preloading can improve the user experience by ensuring that modules and components are loaded quickly when the user navigates to a new route or feature.