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.

Comments

[shrikitamir]

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:

app.module.ts

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

...
...
@NgModule({
declarations: [...],
imports: [
...,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    AngularFireModule.initializeApp(environment.firebase),
...,
],
providers: [...],
bootstrap: [...],
})

someService.service.ts

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

...
...

collection;

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

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

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

.firebaserc
firebase.json