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.