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 )
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.
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);
}
}