No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

QuickLink Strategy

18/25
Recursos

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 12

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para los que vean el curso con versiones nuevas de npm y node pueden usar el comando:

npm install ngx-quicklink  --legacy-peer-deps

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.

bastante picante la QuickLink Strategy鉂

Para instalar ngx-quicklink:

npm i ngx-quicklink --save

Me gustar铆a ver una clase en donde se implemente una estrategia de carga de componentes a demanda cuando el usuario va haciendo scrolling.

Excelente curso.

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 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