Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this Angular 8 Firebase tutorial, we’re gonna integrate Firebase into Angular 8 App with @angular/fire module (official library for Firebase and Angular).
Related Posts:
– Angular 8 Firebase Realtime Database CRUD operations with @angular/fire
– Angular 8 Firestore tutorial with CRUD application example – @angular/fire
– Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
Contents
Technology
– Angular 8
– @angular/fire 5.1.2
– firebase 5.9.4
Instructional Video
Integrate Firebase into Angular 8 App
Step 1: Set up the Firebase Project
Go to Firebase Console, login with your Google Account, then click on Add Project.
Enter Project name, set Project Id and select Country/Region:
Press CREATE PROJECT, browser turns into:
Click on Web App, a Popup will be shown:
Save the information for later usage.
Choose Database in the left (list of Firebase features) -> Realtime Database -> Tab RULES, then change .read and .write values to true:
Step 2: Install @angular/fire and firebase
Run command:
npm install firebase @angular/fire --save
Step 3: Add Firebase config to environments variable
Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:
export const environment = {
production: false,
firebase: {
apiKey: 'xxx',
authDomain: 'gkz-angular-firebase.firebaseapp.com',
databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
projectId: 'gkz-angular-firebase',
storageBucket: 'gkz-angular-firebase.appspot.com',
messagingSenderId: '189575342164'
}
};
Step 4: Setup @NgModule
Open /src/app/app.module.ts, import AngularFireModule and other @angular/fire modules if necessary (we use Firebase Database, for example).
Don’t forget to specify Firebase configuration with AngularFireModule.initializeApp(firebaseConfig):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule, // for database
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5: Use @angular/fire module in Angular component
Open /src/app/app.component.ts:
import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular8Firebase';
description = 'Angular-Fire-Demo';
itemValue = '';
items: Observable;
constructor(public db: AngularFireDatabase) {
this.items = db.list('items').valueChanges();
}
onSubmit() {
this.db.list('items').push({ content: this.itemValue});
this.itemValue = '';
}
}
/src/app/app.component.html:
<div class="container-fluid">
<div style="color: blue;">
<h1>{{title}}</h1>
<h3>{{description}}</h3>
</div>
<div style="width: 300px;">
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="item">Item</label>
<input type="text" class="form-control"
placeholder="Enter content..." id="item"
required [(ngModel)]="itemValue" name="item">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<h2>Content from Firebase</h2>
<div class="col-md-3">
<pre *ngFor="let item of items | async">{{item.content}}</.pre>
</div>
</div>Check Result
– Run Angular project with command: npm start or ng serve.
– Open browser with url http://localhost:4200/, enter Item content.
Item data displays immediately:
Firebase Console Database:
Conclusion
Now we have known how to create a Firebase Project, how to integrate that Firebase Project into Angular Application, we also look at the idea to use @angular/fire module to work with Firebase in simple way.
Happy learning! See you later.
Last updated on March 13, 2021.
Thanks , for very very helpful content.
Thanks
This article helped me a lot with setup.
Thank you so much!
Hello,
Did you get any errors because of these imports:
import { AngularFireModule } from ‘@angular/fire’;
import { AngularFireDatabaseModule } from ‘@angular/fire/database’;
import { environment } from ‘../environments/environment’;
when placed in your code?
Could you help me please?
I am getting all of those errors:
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘analytics’. Did you mean to use ‘import analytics from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:21 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘app’. Did you mean to use ‘import app from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:26 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘auth’. Did you mean to use ‘import auth from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:32 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘database’. Did you mean to use ‘import database from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:42 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:53 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘functions’. Did you mean to use ‘import functions from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:64 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘messaging’. Did you mean to use ‘import messaging from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:75 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘performance’. Did you mean to use ‘import performance from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:88 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘remoteConfig’. Did you mean to use ‘import remoteConfig from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:102 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘storage’. Did you mean to use ‘import storage from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~
node_modules/@angular/fire/database/interfaces.d.ts:2:10 – error TS2614: Module ‘”../../../firebase”‘ has no exported member ‘database’. Did you mean to use ‘import database from “../../../firebase”‘ instead?
2 import { database } from ‘firebase/app’;
~~~~~~~~
node_modules/@angular/fire/database/database.d.ts:5:10 – error TS2614: Module ‘”../../../firebase”‘ has no exported member ‘database’. Did you mean to use ‘import database from “../../../firebase”‘ instead?
5 import { database } from ‘firebase/app’;
~~~~~~~~
ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:10 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘analytics’. Did you mean to use ‘import analytics from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:21 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘app’. Did you mean to use ‘import app from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:26 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘auth’. Did you mean to use ‘import auth from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:32 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘database’. Did you mean to use ‘import database from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:42 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘firestore’. Did you mean to use ‘import firestore from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:53 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘functions’. Did you mean to use ‘import functions from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:64 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘messaging’. Did you mean to use ‘import messaging from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:75 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘performance’. Did you mean to use ‘import performance from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~
node_modules/@angular/fire/firebase.app.module.d.ts:2:88 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘remoteConfig’. Did you mean to use ‘import remoteConfig from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~~~~~~ node_modules/@angular/fire/firebase.app.module.d.ts:2:102 – error TS2614: Module ‘”../../firebase”‘ has no exported member ‘storage’. Did you mean to use ‘import storage from “../../firebase”‘ instead?
2 import { analytics, app, auth, database, firestore, functions, messaging, performance, remoteConfig, storage } from ‘firebase/app’;
~~~~~~~
node_modules/@angular/fire/database/interfaces.d.ts:2:10 – error TS2614: Module ‘”../../../firebase”‘ has no exported member ‘database’. Did you mean to use ‘import database from “../../../firebase”‘ instead?d you mean to use ‘import database from “../../../firebase”‘ instead?
2 import { database } from ‘firebase/app’;
~~~~~~~~ you mean to use ‘import database from “../../../firebase”‘ instead?
node_modules/@angular/fire/database/database.d.ts:5:10 – error TS2614: Module ‘”../../../firebase”‘ has no exported member ‘database’. Did
you mean to use ‘import database from “../../../firebase”‘ instead?
5 import { database } from ‘firebase/app’;
~~~~~~~~
Why are you importing analytics, apps, and the rest?