Angular 8 to Firebase connectivity
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/fire6. 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 serveHere you go You Successfully connect Firebase to Angular
1 Comment
Angular 9 + Firebase Push Notification - omnidecoder · March 4, 2021 at 4:09 pm
[…] Add Your Heading Text HerePush notification is a pop-up notification similar to SMS,app notification… […]