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
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.
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?
Very interesting points you have mentioned, appreciate it for posting. “A big man is one who makes us feel bigger when we are with him.” by John C. Maxwell.