CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestoreangularfire
Andy Chung
Andy Chung

Reputation: 21

Angularfire dependency injection - TS2339 property firestore does not exist on type Cartservice

I am adding angularefire to the angular.io 'take a look tutorial' (shopping cart). Trying to use firebase firestore to replace products.ts and shipping.json, and write a forders file replacing "your order has been submitted". Got it working sort of but ....

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

}

fshipping (inside constructor) works and replaced shipping.json. but in placeOrder method I have to use this.afs.collection('forders')... If I use this.firestorre.collection .... got below error

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

line 45:

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

When researching other online tutorials they could just use the firestore injected via constructor in other methods. What did I miss? Thank you.

Upvotes: 1

Views: 414

Answers (2)

Elmehdi
Elmehdi

Reputation: 1430

I think you are doing something wrong, in your constructor instead of:

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

delete this.afs = firestore; and keep only:

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

and in placeOrder methode, instead of:

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

do:

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

also in your constructor, don't forget to mark firestore as private:

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

Upvotes: 0

Doug Stevenson
Doug Stevenson

Reputation: 317928

The error is telling you that you don't have a property called firestore in your object. Perhaps you meant to use the afs property:

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

Upvotes: 1

Related Questions