Angular 16 - ALERT! FirebaseError: The first argument passed to the collection() function must be either a CollectionReference, a DocumentReference, or FirebaseFirestore

While working on my Angular CRUD project with Firestore integration, I encountered an issue. Whenever I try to add a new object to the database, I receive the following error message: "ERROR FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore." Despite carefully reviewing my code, I am unable to determine what is causing this error. My project uses Angular 16, Firebase 10.3.1, and angular/fire 7.5.0.

ERROR FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

import { Injectable } from '@angular/core';
import { Firestore, collection, addDoc } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root',
})
export class TesteService {
  constructor(private firestore: Firestore) {}

  addData(user: any) {
    const collectionInstance = collection(this.firestore, 'users');
    addDoc(collectionInstance, user)
      .then(() => {
        console.log('It Worked!');
      })
      .catch((error) => {
        console.log('Something went wrong', error);
      });
  }
}

I suspect that this issue may be due to changes in the recent versions of the libraries being used.

Answer №1

Greetings! I faced a similar issue and found the following solution helpful:

Firstly, uninstall the packages using npm:

npm uninstall @angular/fire npm uninstall firebase

Then, install the latest versions of Firebase and Angular Fire:

npm install firebase@latest @angular/fire@latest

This solution resolved the problem for me. Hope it works for you too!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transitioning to TypeScript: Why won't my function get identified?

I am in the process of transitioning a functional JavaScript project to TypeScript. The project incorporates nightwatch.js Below is my primary test class: declare function require(path: string): any; import * as dotenv from "dotenv"; import signinPage = ...

Exploring ways to exclude a column in a TypeORM entity while also providing the flexibility to make it optional for retrieval using the Find method

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm"; @Entity() export class User { @PrimaryGeneratedColumn() id: number; @Column() name: string; } i prefer not to include the password here as I want it to be returned to the client: ...

Steps for updating the value of a button in Typescript and React

I currently have a button that manages my language switcher, configured to handle cookies, URL changes, and now I want it to update the translations on the page as well. The <img> tag is utilized for changing the country flag. < ...

Prevent form validation in ReactiveForm when a hidden field is present

I am encountering an issue with the validation of a button in my form. The button is disabled until the form is valid, which works perfectly when all fields are visible. However, if a field is hidden due to a condition (ngIf), the validation still occurs. ...

Displaying a segment of information extracted from a JSON array

I'm currently tackling a project that involves using React, Redux, and TypeScript. Within the JSON file, there is a key-value pair: "data_start": "2022-09-02" Is there a way to display this date in a different format, specifical ...

Creating a String-Helper component using Angular and TypeScript

One issue I'm facing is that when using the german ü, ä, ö characters in HTML, they are showing up as unknown symbols. To properly display them, you can write ü as "&uuml ;" and ä as "&auml ;", and so on. However, my challenge is coming f ...

Create the HTTP POST request body using an object in readiness for submission

When sending the body of an http post request in Angular, I typically use the following approach: let requestBody: String = ""; //dataObject is the object containing form values to send for (let key in dataObject) { if (dataObject[key]) { ...

Establishing the starting value for Angular 2's reactive FormArray

I am having trouble setting the initial value for an angular 2 reactive form formArray object. Despite using a json object with multiple entries to set the form value, only the first entry is displayed and "form.value" also only shows the first entry. To ...

Nuxt - asyncData ISSUE: "Variable '$axios' is inferred to have an 'any' type."

Referencing the guidelines provided at Encountering an error logged in console while executing yarn dev: ERROR ERROR in pages/index.vue:51:21 ...

Assigning IDs to Values in Angular 2

Here is the code snippet in question: <select [(ngModel)]=""> <option value="1">New York</option> <option value="2"Phoenix</option> <option value="3">Boston</o ...

Injecting data into mat-dialog-actions in Angular - how can it be done?

I have a question regarding passing data to a method in Angular. Below is the code snippet: Is there a way to pass data into addNpi() similar to how editNpi(data) is done below? Your help is appreciated. Thank you! <mat-dialog-content> <ip-dat ...

Detecting the check status of a checkbox in react native: a complete guide

I'm currently working on a scenario where I need to implement logic for checking or unchecking a checkbox in React Native. If the checkbox is checked, I want to print one string, and if it's unchecked, I want to print something else. How can I ac ...

Error: Missing npm install -g @angular/cli@latest package in devDependencies section

ng build is causing an issue that The error reads: Unable to Find npm install -g @angular/cli@latest in devDependencies. When I attempt to start the application using npm start, it works fine. However, while trying to build a file, I encounter this er ...

Setting the initial state for a React toggle custom hook

After clicking a chevron button, an accordion component below it expands to display its children components. The goal is to ensure that each chevron button operates independently so that only the clicked button expands its related accordion. Upon initial ...

Issues arise when attempting to store data in an array in Angular using Typescript

Having an issue where my benchmark foreach loop is not correctly storing all values in the array. Instead, it only saves one value and returns a null error. Strangely, if I remove the push function and replace it with a console.log, all results are displ ...

When clicking, clear the selected items and avoid the function from repeatedly executing

I am currently facing issues with implementing mat-select-autocomplete in my project. Firstly, I have noticed that the function's (selectionChange)="getSelectedOptions($event)" is triggered every time I click on mat-select-autocomplete. Is there a wa ...

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...

The Highcharts Angular library is struggling to access the 'series' property due to it being undefined

Encountered an error message that has puzzled me. I am eager to explore highstock.js and its associated files, but I'm uncertain about the best approach. Despite the chart displaying correctly, this error consistently arises. https://i.sstatic.net/p ...

"Mastering the art of debouncing in Angular using

I am facing an issue where, during a slow internet connection, users can press the save button multiple times resulting in saving multiple sets of data. This problem doesn't occur when working locally, but it does happen on our staging environment. E ...

Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

Let's consider a scenario where we have the following class: export class PersonInformation { constructor( public firstName: string = "", public lastName: string = "", public middleName: string = "", ) { } } Now, we&a ...