Les cuento que esto también funciona con child modules, es decir, la estrategia se debe de declarar en el app.module pero cualquier modulo hijo también es afectado solo que tenga la metadata.
Introducción
Angular 8 Performace
Analizando el tamaño del Bundle
¿Qué es un bundle size? Tree shaking y su importancia
Implementando Webpack Bundle Analyzer
Moment vs date-fns
Aplicando un Performance Budget desde el Angular CLI
Aumenta la velocidad de navegación
Code splitting a nivel de rutas
Implementando una propia estrategia de precarga
Implementando QuicklinkStrategy
Usando Machine Learning para predecir rutas
Google Analytics y Angular
Implementando GuessJs
Precarga con Service workers
¿Qué es Server Side Render?
Implementando Angular Universal
Cuidados con SSR y Angular
Rendimiento en tiempo de ejecución
¿Qué es el Change Detection?
Preparando módulo para Change Detection
Analizando el Change Detection
Optimización de componentes con OnPush
Usando pipes puros
subscribe
Async
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en tÃtulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Nicolas Molina
Aportes 9
Preguntas 1
Les cuento que esto también funciona con child modules, es decir, la estrategia se debe de declarar en el app.module pero cualquier modulo hijo también es afectado solo que tenga la metadata.
Man! Esto si lo lleva a otro nivel, lo puedo variar por temas de publicidad, por temas de roles y mejor aún cruzarlo con Analytics para ver lo más visto y precargarlo.
Excelente clase, ya todo tiene mucho más sentido. Arriba la cuarentenaaaaa
Estrategia de carga selectiva
//crear el service
ng g core/services/preload
// archivo core/services/preload.services.ts
import { Inyectable} from '@angular/core'
import { PreloadingStrategy } from '@angular/router'
import { Observable, of } from 'rxjs'
expport class PreloadService implements PreloadingStrategy {
preload(route: Route, load: ()=> Observable<any>) : Observable<any> {
if (route.data && route.data['preload']) {
return load();
}else {
return of()
// of() observable vacio
}
}
}
// archivo app-routing.module.ts
//agrega metadata a las rutas
...
import { PreloadService } from './core/services/preload.service'
...
{
path:'home',
loadChildren: ()=>import('path').then(m=>m.MModule),
data: { preload: true }
// ese preload puede ser una variable que nosotros creemos
}
...
//cambiar la estrategia de precarga
@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadService
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
En las proximas clases vamos a ver Estrategias orientadas a los datos
que buen curso.
Interesante yo en mis proyectos he implementado solamente la primera opcion…
Buen curso
El ejemplo es muy bueno, lo acabo de implementar en mi sistema donde precargo de acuerdo con el tipo de usuario y está funcionando muy bien, gracias.
Les comparto mi código:
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PreloadStrategyService implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any>{
return route.data?.preload ? load() : of();
}
}```
Estrategia de carga selectiva, esta muy genial
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?