Como Instalar Angularfire2 en Angular

Que es AngularFire2

AngularFire2 es la librería que se usa en angular para acceder a bases de datos firebase, posee una serie de objetos para acceder a tus documentos de FireStore o RealTime Data Base.

Puedes encontrar más información sobre esta librería en el repositorio público de GitHub aquí

Como Se Instalar AngularFire2

Como cualquier otro paquete en angular se debe instalar a través de NPM, sino sabes que es NPM te invito a que visites el siguiente enlace

En pocas palabras NPM te permite instalar cualquier librería no solo de angular sino también de otros entornos de programación.

El comando que debes ejecutar para instalar es el siguiente

Versiones mas recientes

ng add @angular/fire

npm install firebase angularfire2 --save

También puedes instalar usando el comando latest para que se te instale la última versión del angularfire2, esto es así

npm install -S firebase@latest

El parámetro –save es para que se guarde en el proyecto actual, no esta demás decir que debes estar en el directorio de trabajo de tu proyecto de angular.

Al momento de escribir este post la versión actual es angularfire2 5.2.1, como lo estoy instalando en un proyecto que ya tiene mas de un año de haberse generado, me dio el siguiente error:

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'.
  Type 'FirebaseApp' is missing the following properties from type 'App': installations, performance, remoteConfig, analytics

En mi caso sucedió que la versión de la librería de firebase no era la correcta para trabajar con angularfire esto me olbligó a instalar la version 5.10.1, por lo que tuve que correr el siguiente comando

npm install --save firebase@5.10.1

Asegurate de tener siempre la version compatible con tu angularfire2, o tendrás problemas, recuerda que una cosa es la librería de angularfire2 y otra la de firebase.

Si al momento de ejecutar tu app recibes un error como el siguiente:

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'. Property 'performance' is missing in type 'FirebaseApp' but required in type 'App'.

Ejecuta el siguiente comando para que te actualize bien las dependencias y librerías necesarias

npm install firebase @angular/fire --save

Por lo menos en mi caso se resolvió el problema, si sigues teniendo algún inconveniente dejame un comentario.

Como usar AngularFire2

Generar la variable de acceso a la base de datos que te brinda Firebase, para ejemplo te puede quedar como la que se ve a continuación:

firebase: {
    apiKey: "qwijewknewhewhjwbjd23922SDSj2",
    authDomain: "hdhd.223.firebaseapp.com",
    databaseURL: "https://hdhd.223.firebaseio.com",
    projectId: "hdhd.223",
    storageBucket: "hdhd.223.appspot.com",
    messagingSenderId: "293923232",
    appId: "1:293923232:web:293923232a0c16c73d40d",
    measurementId: "G-SJDHSKDKW"
  }

Debe quedar mas o menos asi:

Agregar al app.module.ts lo siguiente

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';

Te debe quedar así:

Declarar las importaciones de los módulos de angular en el proyecto

  AngularFireModule.initializeApp(environment.firebase),
  AngularFireAnalyticsModule,
  AngularFirestoreModule,

---