Technology

AngularFire

Jacques Leemans
, , ,
1 min. read

AngularFire

Introduction

How to add Firebase to an Angular Web Application

Install AngularFire

1
npm install firebase @angular/fire

Add Firebase Configuration

Add Firebase Config to environment

1
2
3
4
5
6
7
8
9
10
11
12
13
export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Import modules into app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Firebase services + environment module
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ]
})

References

https://github.com/IdanCo/angularfire2

https://www.positronx.io/full-angular-firebase-authentication-system/

https://medium.com/letsboot/lets-learn-how-to-install-and-setup-angularfire2-4-0-135d72bb0a41

Share