Aplicando lazy loading a tu app
Tags: angular, kikstart, beginners, espanol
Published: 2020-08-04 17:51:58

---
title: "Aplicando lazy loading a tu app"
description: "En primer lugar generamos los componentes y módulos que necesitamos para agregar páginas a nuestra app."
published: true
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50j277x778t5gjd6pjcc.png"
canonical_url: ""
tags: angular, kikstart, beginner, espanol
---

## Requisitos
Haber hecho tu app básica, puedes tomar el ejemplo del [tutorial # 1](https://dev.to/kikstartdev/tutorial-1-instalando-angular-cli-40ed) 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:

```bash
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 instalado`ng add @angular/fire` y configurar tu environment, como en el [tutorial # 4 de la serie 1](https://dev.to/kikstartdev/tutorial-4-desplegar-una-app-de-angular-cli-a-firebase-3aij).


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

```typescript
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 `imports`coloca lo siguiente:

```typescript
 AngularFireModule.initializeApp(environment.firebase),
 AngularFirestoreModule
```

## Paso # 3
Mostrar la ruta

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

```typescript
 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:

```bash
 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:

```typescript
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](https://www.npmjs.com/package/rxfire) entonces lo instalamos.


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

```typescript
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:

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

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

```typescript
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:

```html
  <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](https://twitter.com/derlys_paola) y con gusto te contestare.