¿Cómo precargar todos los paquetes angulares?

Introducción a la carga previa: la introducción de la función Lazy Loading en Angular mejoró enormemente el rendimiento de la aplicación. La carga diferida ayuda a mantener los tamaños de paquetes iniciales más pequeños, lo que a su vez ayuda a reducir los tiempos de carga. Pero, el principal problema con la carga diferida era que cuando el usuario navega (o alcanza) la sección de carga diferida de la aplicación, el enrutador tiene que buscar los módulos requeridos del servidor, lo que puede llevar tiempo.

Por lo tanto, aunque el tiempo de carga inicial de la aplicación se reduce, en última instancia, el usuario tendrá que esperar un tiempo hasta que el enrutador obtenga ese módulo específico. Para resolver este problema, Angular ideó el concepto de precarga. Con esta función, los módulos de carga diferida están precargados y, por lo tanto, el usuario no tiene que esperar a que se obtengan. Esta carga previa tiene lugar cuando el usuario interactúa con la aplicación que ya está cargada durante la carga diferida.

Enfoque: El enfoque básico es establecer la estrategia de precarga que necesitamos. Necesitamos especificar que precargaremos todos los módulos mencionándolos explícitamente en app-routing.module.ts

clase abstracta PreloadingStrategy {
abstract preload(ruta: Ruta, fn:() => Observable): observable
}

Pasos: Para precargar todos los módulos, simplemente siga los pasos a continuación:

• Agregue una instrucción de importación para PreloadAllModules desde app-routing.module.ts
  Sintaxis:
  

  importar {NgModule} desde ‘@angular/core’;
  import { RouterModule, Routes, PreloadAllModules } desde ‘@angular/router’;

• Al configurar RouterModule en app-routing.module.ts , pase las opciones del enrutador, incluida la estrategia de precarga, a la función forRoot().
  Esto le indicará al enrutador que configure la estrategia de precarga para precargar todos los módulos.
  Sintaxis:
  

  @NgModule({
  importaciones:[RouterModule.forRoot(appRoutes, { preloadingStrategy : PreloadAllModules})],
  exportaciones:[RouterModule]

  })

• Ahora ejecute ngserve en Angular CLI para reconstruir su aplicación. Abra http://localhost:4200 . Haga clic derecho para inspeccionar elementos (o Ctrl+Shift+I) y vaya a la pestaña Red para ver el resultado.
  Sintaxis:

  ng serve

Ejemplo: aquí hay un ejemplo de qué app-routing.module.ts se verá así.

import { NgModule } from '@angular/core';
import { RouterModule, Routes, 
    PreloadAllModules } from '@angular/router';
  
import { ListComponent } from 
        './list/list.component';
import { DetailComponent } from 
        './detail/detail.component';
import { AppComponent } from './app.component';
import { PageComponent } from './page/page.component';
import { NewComponent } from './new/new.component';
  
const appRoutes: Routes = [
    { path: '', redirectTo: '/contact',
            pathMatch: 'full' },
              
    { path: 'contact', component: ListComponent },
    { path: 'details/:id', component: DetailComponent },
    { path: 'new', component: NewComponent },
    { path: 'not-found', component: PageComponent },
    { path: '**', redirectTo: '/not-found' }
]
  
@NgModule({
    imports: [RouterModule.forRoot(appRoutes,
        {
            preloadingStrategy: PreloadAllModules
        })],
    exports: [RouterModule]
  
})
export class AppRoutingModule {
  
}

Producción: