Aplicando lazy loading a tu app

Requisitos

Haber hecho tu app básica, puedes tomar el ejemplo del tutorial # 1 de la serie "Introducción a Kikstart UI"

💡Tip

La manera en que generamos el siguiente componente
es mucho más eficiente ya que crea el componente con su
respectiva ruta y módulo.

Paso # 1

Creamos el componente posts con su módulo y rutas.

1: Ejecuta el siguiente comando:

ng g module posts --route posts --module app 

Paso # 2

Configuramos nuestra app para utilizar las colecciones del proyecto en firebase.

💡Recuerda

Antes de hacer este paso debiste haber instaladong add @angular/fire y configurar tu environment, como en el tutorial # 4 de la serie 1.

1: Busca la rutasrc/app.module.ts y escribe lo siguiente en la parte superior:

import {AngularFireModule} from "@angular/fire"; import {environment} from "../environments/environment"; import {AngularFirestoreModule} from "@angular/fire/firestore"; 

2: Luego en el mismo archivo en el array de importscoloca lo siguiente:

 AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule 

Paso # 3

Mostrar la ruta

1: Busca la ruta src/app/app.component.tsen el array de link agrega un label más.

 links: UiLink[] = [ { label: 'Home', path: '/' }, { label: 'About', path: '/about' }, { label: 'Contact', path: '/contact' }, { label: 'Blog', path: '/posts' }, ]; } 

Paso # 4

Creamos el servicio y lo usamos en nuestro componente.

1: Ejecuta el siguiente comando:

 ng g service posts/posts --skip-tests 

2: Configura el servicio en el archivo posts.service.ts y agrega lo siguiente en la parte superior:

import { Observable } from 'rxjs'; import { AngularFirestore } from '@angular/fire/firestore'; import { collectionData, docData, fromCollectionRef } from 'rxfire/firestore'; 

💡Recuerda

Para cada paquete de firebase que utilices debes instalarlo en este caso usamos rxfire entonces lo instalamos.

3: Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsService { blogs: Observable<any[]>; collectionRef: any; constructor(private firestore: AngularFirestore) { this.collectionRef = this.firestore.collection('courses'); this.blogs = collectionData(this.collectionRef.ref, 'id'); } } 

Paso # 5

Hacemos la lógica para usar nuestro servicio.

1: Busca la ruta src/app/posts.component.ts coloca lo siguiente en la parte superior:

import { PostsService } from './posts.service'; import { Observable } from 'rxjs'; 

2:Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsComponent implements OnInit { courses$: Observable<any>; constructor(public service: PostsService) { this.courses$ = this.service.blogs; } ngOnInit(): void {} } 

Paso # 6

Finalmente renderizamos los datos en nuestro componente

1: Busca la ruta src/app/posts/posts.component.html y pega lo siguiente:

 <div *ngIf="courses$ | async as posts"> <div *ngFor="let post of posts"> <img src="{{ post.author_img }}" /> <a [routerLink]="['/posts', post.id]"> <h2>{{ post.title }}</h2> </a> <h3>{{ post.description }}</h3> <h4>{{ post.author_name }}</h4> </div> </div> 

Resumen

Generamos un componente post con su módulo y ruta,creamos su servicio y lo usamos en el templete.

Gracias por seguir este tutorial, si tienes algun comentario hazlo a través de mi twitter y con gusto te contestare.