Para los que vean el curso con versiones nuevas de npm y node pueden usar el comando:
npm install ngx-quicklink --legacy-peer-deps
Manejo de rutas
Qué aprenderás sobre Angular Router y programación modular
Creando rutas
Creando el Home
Página de categorías
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
Módulos
LazyLoading y CodeSplitting
Programación Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de módulos
Precarga de módulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
QuickLink Strategy
18/25Recursos
Puedes optar entre precargar todos los módulos con Lazy Loading, o seleccionar los que a ti te parecen los más importantes que el usuario necesitará. Justamente ese es un inconveniente con esta técnica, no tiene en cuenta al usuario.
Veamos otra forma de precargar módulos teniendo en cuenta al mismo.
Cómo hacer precarga de módulos en pantalla
La estrategia de pregarga de módulos QuickLink utiliza la API nativa del navegador Intersection Observer API para observar el viewport de la pantalla y solo precargar los módulos cuyos enlaces hacia ellos estén visibles.
En otras palabras, si en pantalla hay un enlace visible que redirecciona a un módulo en particular, este será precargado.
Puede ocurrir que un usuario administrador, tenga a disposición todos los módulos de la aplicación. Pero que un usuario con menor privilegio solo podrá acceder a unos pocos módulos y no tiene sentido que precargue todos.
1. Instalando la dependencia
Para activar esta estrategia, instala la dependencia ngx-quicklink con npm i ngx-quicklink --save.
2. Importando el módulo
Importa el módulo QuicklinkModule, en el módulo principal de tu aplicación.
// app.module.ts
import { QuicklinkModule } from 'ngx-quicklink'
@NgModule({
imports: [
// ..
QuicklinkModule
],
})
export class AppModule { }
3. Importando la estrategia
Importa la estrategia en el routing de la aplicación.
// app-routing.module.ts
import { QuicklinkStrategy } from 'ngx-quicklink'
// ..
@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: QuicklinkStrategy
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
También, muy importante, importa el módulo QuicklinkModule en cada uno de los módulos de tu aplicación que quieras que sea precargado.
TIP: Puedes importar QuicklinkModule en el SharedModule si deseas no tener que hacerlo módulo por módulo y solo lo haces en el módulo compartido.
Ahora si, podrás observar que solo los módulos visibles en el viewport se precargan, ignorando los que el usuario no necesitará.
Contribución creada por: Kevin Fiorentino.
Aportes 14
Preguntas 4
Ordenar por:
ngx-quicklink
quicklink implementation for Angular. It provides router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.
Para instalar ngx-quicklink:
npm i ngx-quicklink --save
bastante picante la QuickLink Strategy❄
Me gustaría ver una clase en donde se implemente una estrategia de carga de componentes a demanda cuando el usuario va haciendo scrolling.
QuickLink Strategy se basa en la API de Intersection Observer para precargar solo los módulos pertenecientes a los links que se pueden ver en la pantalla. De esta forma la estrategia de precarga se adapta al usuario, lo cual es muy útil en casos en los que se tiene por ejemplo una interfaz que varía según el rol del usuario (administrador, vendedor, etc).
Esta estrategia no forma parte del core de Angular, aunque fue desarrollada por un ingeniero del equipo de Angular y cuenta con el respaldo de la comunidad.
Excelente curso.
Holaa, vengo repasando temas de angular, donde la versión de angular usada es la “@angular/common”: “^15.1.5”, donde la versión de quickLink que me funcionó bien es “ngx-quicklink”: “^0.3.0”,
Lbireria ya no compatible con V16
Excelente contenido, esto lo sabia, es hora de implementarlo. en mi app productiva.
No se si a todos les paso el siguiente error:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(WebsiteModule)[InjectionToken LinkHandler -> InjectionToken LinkHandler -> InjectionToken LinkHandler -> InjectionToken LinkHandler]:
NullInjectorError: No provider for InjectionToken LinkHandler!
NullInjectorError: R3InjectorError(WebsiteModule)[InjectionToken LinkHandler -> InjectionToken LinkHandler -> InjectionToken LinkHandler -> InjectionToken LinkHandler]:
NullInjectorError: No provider for InjectionToken LinkHandler!
Lo resolví quitando el modulo QuicklinkDirective del modulo website.module.
habilitar quicklink para todas las rutas
Se me presentada una incompatibilidad al momento de importarlo en los módulos, pero solamente tenia que detener y volver a correr el proyecto. 👍👌
gran extrategia, no la conocia, un amor esta biblioteca
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?