Implementando QuicklinkStrategy

QuicklinkStrategy
detecta los link que estan en el viewport y precarga esos modulos
Utiliza IntersectionObserver para llevar a cabo su tarea.

installar quicklink

npm install gnx-quicklink --save

Importarlo en app.module y shared.module

// app.module.ts y tambien en shared.module.ts
import { QuicklinkStrategy } from 'ngx-quicklink'

@NgModule({
    ...
    imports: [
        ...
        QuicklinkModule
    ]
})

Implementar la estrategia en el app-routing

// app-routing.module.ts 
import { QuicklinkStrategy } from 'ngx-quicklink'

...
@NgModule({
    imports: [RouterModule.forRoot(routes, {
        enableTRacing: false,
        preloadingStrategy: QuicklinkStrategy,
        paramsInheritanceStrategy: 'always'
    })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

listo.

Link para leer sobre la API que permita esta gran funcionalidad

https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API

quicklink solo detecta los RouteLink de angular?? si yo coloco this.route.navigateByUrl() en el ts tambien los detecta??

Que ventaja real tiene esta forma de pre-cargar, si en realidad todos los routerlink estan en el homepage? solo seria util en el caso que tengas links que estan dentro de otros modulos?

Muy bueno !

Comparto el link,

https://github.com/mgechev/ngx-quicklink

Muy buena implementacion

Excelente estrategia y explicación, una herramienta más! Por ello nunca pares de aprender!

Si tengo mi menú de hamburguesa en la esquina superior izquierda con todos los links de opciones a diferentes módulos estos también se cargan.