AngularFireDatabase import causing me login/sign up problems - Angular

Question

sidebar.service.ts ( service file for dashboard component ) :

constructor(private db: AngularFireDatabase) {}

  getUsers(): Observable<any[]> {
    return this.db.list('/users').valueChanges();
  }

dashboard.component.ts :

import { SidebarService } from './sidebar.service';

ngOnInit() {   
    this.fetchUsers();    
  }

 
 fetchUsers(): void {
    this.sidebarService.getUsers().subscribe(users => {
      this.users = users;
      this.filteredUsers = this.users;
    }, error => {
      console.error('Error fetching users:', error);
    });

dev tools errors :

ERROR NullInjectorError: NullInjectorError: No provider for InjectionToken angularfire2.app.options!

so everytime I login/signup , the page becomes white , the dev tools error appear and it don't take me to dashboard component ( the link stays http://localhost:4200/login or http://localhost:4200/signup )

Answer 1

Try changing the way you access the database.

You can fix this issue, by changing the way you import Firestore. It should be imported from 'firebase/firestore' and then using this, we can use the Firebase functions collection or addDoc to perform DB operations.

Cloud Firestore Docs Reference 1

AngularFire

import { Firestore, collectionData, collection } from '@angular/fire/firestore';

@Injectable({
    providedIn: 'root'
})
export class SidebarService {
    private firestore: Firestore = inject(Firestore); // <- changed here!

    constructor() {
    }

    getUsers(): Observable<any[]> {
        const itemCollection = collection(this.firestore, 'users');
        return collectionData<Item>(itemCollection);
    }
}

Reference Answer