Enrutado con lazy loading en angular 8

¿Que es lazy loading?

Tambien conocida como carga perezosa, es una técnica para cargar los datos solo en el momento que serán utilizados, por ejemplo imaginemos que tenemos una grilla paginada con un montón de datos, utilizando la lógica de carga perezosa cargaremos los datos a medida que el usuario vaya navegando por las paginas....
Otro ejemplo y es el que vamos a ver acá, es cuando tenemos un menú para navegar por nuestro sistema angular. Si no utilizamos esta tecnica todas nuestras paginas se cargaran al momento de cargar el sitio, esto obviamente es muuuuuuuuy negativo para la experiencia de usuario.... usando lazy loading cargaremos las paginas según donde vamos navegando....... bueno mucho bla bla, mejor vayamos a lo nuestro..

¿Que haremos?

Crearemos un pequeño sitio con un menú de navegación que tendrá los siguientes módulos. Usaremos el enfoque un modulo por componente, que es la forma recomendada por angular:

1. inicio
2. donde_estamos:   Esta sección la cargaremos sin lazy loading, para ver la diferencia. por esta razón solo crearemos el componente sin el modulo.
3. conocemos:    en esta sección se nos cargara tres links adicionales:

• mision_vision
• quienes_somos
• nuestra_historia

¿Que necesitamos?

• Un ambiente para trabajar en angular, o sea tener instaladas las herramientas
• un editor de texto, por ejemplo Visual studio Code
• saber un poco de HTML
• Ser rubio y de ojos azules....mentira

¿Dificultad?

Leve, es muy facil...pero basico si quieres hacer aplicaciones con angular y para aprenderlo solo te tomara 15 minutos

Manos a la obra

Abrimos nuestra consola y nos posicionamos en la ruta donde queremos guardar la carpeta de nuestro proyecto y tecleamos lo siguiente

Primero creamos nuestro proyecto en angular

ng new normal-router-page  --routing

En versiones anteriores se debía especificar la creación de nuestro modulo routing, en angular 8 te preguntara si quieres incorporarlo, pero es buena practica dejarlo explicita con "--routing"

Ya creado nuestro proyecto, ingresamos a la carpeta que la representa, en nuestro caso es:
cd normal-router-page

luego crearemos los módulos y componentes:

1-inicio (modulo y componente)

ng g m  seccion/inicio --routing
ng g c seccion/inicio --module inicio


2-Conocenos(modulo y componente)
ng g m seccion/conocenos/conocenos --routing
ng g c seccion/conocenos/conocenos --module conocenos


3-Mision y vision(modulo y componente)
ng g m seccion/conocenos/mision-vision  --routing
ng g c seccion/conocenos/mision-vision --module mision-vision


4-Quienes somos(modulo y componente)
ng g m seccion/conocenos/quienes-somos  --routing
ng g c seccion/conocenos/quienes-somos --module quienes-somos


5-Nuestra historia(modulo y componente)
ng g m seccion/conocenos/nuestra-historia  --routing
ng g c seccion/conocenos/nuestra-historia --module nuestra-historia


6-donde estamos(solo el componente para comparar el routing de la forma normal v/s lazy loading)
ng g c seccion/donde-estamos 


ya con esto tenemos casi todo listo, si bien es bastante intuitivo no esta demás explicarlo un poco, por ejemplo veamos la creación de un modulo:
ng g m  seccion/inicio --routing

'ng g m' = esto significa "ng generate module" o sea generar un modulo, ¿donde lo genero? donde lo especifique, en este caso seria "seccion/inicio" o sea  "normal-router-page/seccion/inicio".
¿Que significa "--routing"? con esta etiqueta nos creara un modulo adicional para manejar las rutas del modulo. teniendo el nombre de "inicio.module.routing.ts".
para el caso de la creación del componente es igual que el modulo, pero teniendo en cuenta que :
'ng g c'=generate copomponent
'--module inicio'= crear componente para el modulo 'inicio', esto creara el componente configurado para ser utilizarlo junto al modulo 'inicio'.

Importante: Al crear el modulo y luego el componente vinculado al modulo, evitamos que el componente se incluya en nuestro app.module.ts, esto es fundamental para que funcione nuestra carga perezosa. Por eso es muy importante el orden de creación, primero el modulo y luego el componente.
De hacerlo en diferente orden tendrás que configurar de forma manual y eliminar la referencia del componente en "app.module.ts"

Agregando nuestro HTML

Acá ya no utilizamos la terminal, sino que ahora nos vamos a abrir nuestra carpeta "../normal-router-page" con el editor de texto a elección, en mi caso utilizo Visual Studio Code.

Abrimos el archivo app.component.html  y pegamos lo siguiente:




Luego Abrimos el archivo   app.routing.modules.ts y pegamos:

Hacemos lo mismo con el archivo conocenos.routing.modules.ts y pegamos:

También pegamos en conocenos.component.html lo siguiente :

Bueno, y hacemos lo mismo con los siguientes archivos:
mision-vision.routing.modules.ts



nuestra-historia.routing.modules.ts



quienes-somos.routing.modules.ts



Y listo...... con esto ya terminamos, podemos ejecutar nuestro pequeño sistema navegar por las distintas paginas que hemos creado. Solo debemos ejecutar en nuestra terminal:
ng serve
y wualaaaaa nos vamos a nuestro navegador y ejecutamos:
localhost:4200 


Si te gusto o te sirvió no olvides compartirlo y darle un like aaaa y si tienes algo que comentar bienvenido sea.... :)