DEV Community

Paul Welby
Paul Welby

Posted on

Angular / Firebase configurations... not as easy

As of late, I have been trying to configure a simple application to run in Angular v12 with the new Firebase framework and I am finding it has gotten "cumbersome" and not as user-friendly as in the past. Of course I realize, as tech evolves there is more complexity even in the implementation. Better documentation and use cases... make for a better understanding.. I always say. Examples also help new users to process.

Discussion (1)

shrikitamir profile image
shrikitamir • Edited on

I agree it's not user friendly as it used to be.
after reading the docs I've managed to implement it.

First add your config to the environment.
Than do the following:


import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

declarations: [...],
imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
providers: [...],
bootstrap: [...],
Enter fullscreen mode Exit fullscreen mode


import { AngularFirestore } from '@angular/fire/compat/firestore';



 constructor(private afs: AngularFirestore) {
    this.collection = afs.collection('some_collection');

 getCollection() {
    return this.collection.get();

Enter fullscreen mode Exit fullscreen mode

Also make sure that when installing angular/fire the following files has been added to your project: