Angular 8 to Firebase connectivity

Published by Gajanan Shinde on

Angular 8 is a Typescript frame-work used to build web app and Firebase is essentially a real time database. The data appears as JSON files and allows real time changes to occur on the connected client side. Hopefully you all know how to install angular? So moving forward lets start to connect the firebase with Angular 8

1. Create Firebase Project

First logged in into firebase and go to console and Add new project>Enter ProjectName> as project created select web

2. Create App

Now register app name and if you want hosting you can also select for hosting but it’s totally optional

3. Add Firebase SDK

The Firebase SDK enables access to the Firebase services on several platforms. Here we use Web platform

4. Add Credential

Add code of Firebase apiKey,appId and projectId to angular project i.e in your environment.ts from project/src/environment

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
// Firebase library to be imported
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,             // For FireStore
    AngularFireStorageModule,	        // For Storage
    AngularFireAuthModule,		// For Authentication
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Install firebase in angular

npm install firebase @angular/fire

6. Add @angular/fire to the App Module

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
// Firebase library to be imported
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,             // For FireStore
    AngularFireStorageModule,	        // For Storage
    AngularFireAuthModule,		// For Authentication
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And run the Code

          ng serve

Here you go You Successfully connect Firebase to Angular


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *