Conectar Firebase con Angular

Hola a todos, hoy os voy a explicar como podemos conectar firebase con nuestra aplicación Angular.

Firebase es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles.​ Aquí puedes su pagina oficial.

Con una cuenta de google puedes crear varios proyectos (actualmente 10), estos de primeras son gratuitos pero si luego tiene mucho tráfico si tendrás que pagar.

Lo primero que haremos es crear un proyecto.

Para este ejemplo, no seria necesario google analytics, pero si tiene una cuenta de google analytics, la puedes asociar.

Ya tenemos nuestro proyecto de firebase creado y listo para usar.

Ahora creamos una «app» para web.

Escribimos el nombre de la app:

Guardar el código, lo utilizaremos después.

Ya toca crearnos nuestra aplicación Angular. Te dejo un tutorial sobre ello.

Crear y ejecutar un proyecto angular

Ya con nuestro proyecto creado, instalamos la dependencia de firebase:

Yo en mis proyectos suelo guardar la información de la conexión con firebase en los ficheros de environments, esto puede ser mejorado, por ejemplo un proyecto de prueba para el desarrollo y otro real para producción. Algo así, adaptarlo con vuestros datos:

Recordar de ponerlo en ambos ficheros.

Lo últimos que nos falta es añadir en el app.module, todo lo necesario para que podamos arrancar.

Para las versiones @angular/fire a partir del 7.

import { environment } from './../environments/environment.prod';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig))
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Para versiones anteriores a la versión 7.

import { environment } from './../environments/environment.prod';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig))
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

En futuros posts, veremos como sacar provecho de firebase.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.