The TypeScript error TS2339 states that the property "firestore" does not exist in the Cartservice type in Angular

I have integrated angularefire into the angular.io 'take a look tutorial' (shopping cart) in order to utilize firebase firestore for products data and orders processing. I have managed to partially replace products.ts and shipping.json, as well as update the message "your order has been submitted" with a dynamic solution. However, there is still an issue that I am facing...

Within cart.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
//angularfire
import { AngularFirestore} from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Injectable()
export class CartService {

  items = [];
//angularfire
  fshipping: Observable<any[]>;
  afs: AngularFirestore;

  constructor(
    private http: HttpClient,
//angularfire
    firestore: AngularFirestore
  ) { 
    this.fshipping = firestore.collection('fshipping').valueChanges();
    this.afs = firestore;
  }

  addToCart(product) {
    this.items.push(product);
  }
  getItems() {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }

  getShippingPrices() {
//angularfire
    // return this.http.get('/assets/shipping.json');
    return this.fshipping;
  }

//angularfire
  placeOrder(customerData) {
    const orderColl = this.afs.collection<any>('forders');
//    const orderColl = this.firestore.collection<any>('forders');
    orderColl.add({
      name: customerData.name, 
      address: customerData.address
    });
  }

}

The implementation of fshipping (within the constructor) successfully replaced shipping.json. However, within the placeOrder method, when I attempted to use this.afs.collection('forders') instead of this.firestorre.collection ..., I encountered the following error:

ERROR in src/app/cart.service.ts:45:28 - error TS2339: Property 'firestore' does not exist on type 'CartService'.

This issue occurred at line 45:

const orderColl = this.firestore.collection<any>('forders');

In my research of other online tutorials, it seems that they were able to seamlessly utilize the firestore instance injected via the constructor in other methods. What could be the missing piece in my case? Thank you.

Answer №1

You're receiving this error because the object does not contain a property named firestore. It seems like you intended to use the afs property instead:

const orderCollection = this.afs.collection<any>('orders');

Answer №2

It seems like there might be a mistake in the way you are setting up your constructor. Instead of:

this.fshipping = firestore.collection('fshipping').valueChanges();
this.afs = firestore;

try removing this.afs = firestore; and only keeping:

this.fshipping = this.firestore.collection('fshipping').valueChanges();

In the placeOrder method, instead of:

const orderColl = this.afs.collection<any>('forders');

use:

const orderColl = this.firestore.collection<any>('forders');

Also, make sure to declare firestore as private in your constructor:

constructor(private http: HttpClient, private firestore: AngularFirestore)

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

Using MatTableDataSource in a different Angular component

I am working with two components, namely Order and OrderDetail. Within the Order component, I have a MatTableDataSource that gets populated from a service. OrderComponent Prior to the constructor listData: MatTableDataSource<DocumentDetailModel>; ...

Discover the route connecting two points. The current maze algorithm is operating at a sluggish

I'm in the process of developing an algorithm to identify the most efficient route between two points within a maze, but I've hit a snag with its current speed. Here's what I've done so far: Auxiliary classes: import { Coord } from " ...

Determining the Type<> of a component based on a string in Angular 2

Can you retrieve the type of a component (Type<T>) based on a string value? For example: let typeStr: string = 'MyComponent'; let type: any = getTypeFromName(typeStr); // actual type ...

Issue with Angular2 not able to call POST method in CodeIgniter RESTful API resulting in 404 error

I am encountering an issue with my codeigniter restful API. While the GET method is working fine, I am unable to get the POST method to work from Angular2. this.api.post('quality/addeditquality', this.formdata).subscribe(data => { c ...

Having trouble with 'npm <script-command>' not working? Try changing it to 'npm run-script <script-command>' instead

Currently, I am configuring a node js backend to operate on TS for the first time within a mono-repo that has a specific folder structure. You can view the structure here. The package.json file is located in the main directory as shown below: "scr ...

Creating a personalized React date selection tool using TypeScript

After following the instructions in the documentation for creating a custom datepicker, I finally managed to build one. However, I encountered an error stating "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean ...

An effective way to define the type of a string property in a React component using Typescript

One of the challenges I'm facing is related to a React component that acts as an abstraction for text fields. <TextField label="Enter your user name" dataSource={vm} propertyName="username" disabled={vm.isSaving} /> In this set ...

Struggling to integrate authentication and authorization features into a ReactJS application with Microsoft Azure AD or Database login functionality

We have an application built on React v18 with a backend that includes a Web API and SQL Server database. Our requirement is to authenticate and authorize users using either MS Azure AD or the database. If a user attempts to log in with a username and pas ...

Are you ready to put Jest to the test by checking the completion event of

The RxJS library's Observer triggers three main events: complete error next If we want to verify the occurrence of the complete event using Jest, how can this be achieved? For instance, we are able to test the next and error events by checking for ...

Tips for using distinct style and script tags for various templates in angular

I am using a Bootstrap template that comes with different styles and scripts for right-to-left (RTL) and left-to-right (LTR) versions. I have successfully added the theme to my index.html file, and it works perfectly when choosing between the LTR or RTL ve ...

Maximizing the potential of process.hrtime.bigint

Whenever I include the following code: const a = process.hrtime.bigint(); The linter says it's okay, but during compilation, I encounter this error message: error TS2339: Property 'bigint' does not exist on type 'HRTime'. This ...

Is there a way to upload a file and FormData simultaneously without storing the file on the server's disk?

When it comes to uploading files and FormData to a server, I found a method that works well: On the client side, I am using Angular 2 with the following logic: 1. In the component onLoadForeignLightCompanies(event: any) { let fileList: FileList = ev ...

VS Code is flagging TypeScript errors following the recent software update

After updating my VS Code, I started seeing TypeScript error messages like the following: ButtonUnstyled.types.d.ts: Module '"/components/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop&a ...

Retrieving the value of an object using a key in TypeScript

Is there a way to create an object using keys from another object and determine the type based on a string? For example: const result = rebuild(query, { name: 'string' }); // query - { name: '123', dont_need: true } // result - { n ...

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

Currently working on a hello world project in Electron and stumbled across the possibility of using Typescript for the Main process, . The provided instructions suggest changing the file extension from index.js to index.ts and updating the package.json fi ...

Using Default Parameters in the ngrx getWithQuery() Function

Curiosity strikes me on how to send the default data already present in getWithQuery(), just like this: @Injectable({providedIn: 'root'}) export class CompaniesDataService extends DefaultDataService<Company> { private readonly _URL: str ...

What is the best way to accept user input in typescript?

Currently, I am working on a TypeScript project that involves taking user input for the addition of two numbers. Below is the code snippet I am using: function rotatedString(S1,S2){ return S1+S2; } function processData() { //INPUT[uncomment & m ...

Encountering a warning message in Vue 3 Migration Build using Typescript: Error in finding export 'default' (imported as 'Vue') within the 'vue' package

I've been working on migrating my vue2 application to Vue3 using the Migration Build. I diligently followed the steps outlined in the documentation available at https://v3-migration.vuejs.org/migration-build.html, but despite that, I still keep encoun ...

What is the best way to apply a consistent set of values when altering fields conditionally in dynamically generated fields within Angular?

I just finished developing a dynamic row that consists of 2 dropdowns and a text field. Users have the ability to add or remove additional rows as needed. There is a specific condition in place: if the first dropdown value is 'Date' and the seco ...

I'm struggling to figure out how to specify the data type for storing an array of objects in a variable using React.useState

I am currently working on extracting values from an .xlsx file using the SheetJS library. Below, I will provide the code snippets, errors encountered, and the different approaches I have attempted. Data extracted from var dataToJson: (6) [{…}, {…}, { ...