Property 'pipe' does not exist on type 'AngularFireObject<{}>'

Question

I'm a beginner to Angular. I'm watching the tutorial of Mosh Hamedani using the Angular version 6 but the problem is the tutorial version is 4. I'm working on the e-commerce project on AddToCart button where the product should increase it's quantity by clicking the button and updated in Firebase using productId and also if I try to add new product then id of that new product should add in AngularFire Database.

Everything is working perfectly now I'm getting error in shopping-cart.service.ts file. The error is in the last line async addToCart(product: Product) where the error shows property pipe doesn't exist on type AngularFireObject.

Here is the code.

shopping-cart.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Product } from '../models/products';
import { take } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ShoppingCartService {
   constructor(private db: AngularFireDatabase) { }

private create(){
    return this.db.list('/shopping-carts').push({
        dateCreated: new Date().getTime()
    })
}

private getCart(cartId: String){
    return this.db.object('/shopping-carts/' + cartId);
}

private getItem(cartId: string, productId: string){
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
}

private async getOrCreateCartId(){
    let cartId = localStorage.getItem('cartId');
     if(cartId) return cartId;

    let result = await this.create();
    localStorage.setItem('cartId', result.key);
    return result.key;
}

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.pipe(take(1)).subscribe(item => {
        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
    });
}

}

Answer 1

the problem here is that your this.getItem() method isn't returning an Observable, instead it returns AngularFireObject, which hasn't pipe property, so you should call valuChanges method which will return an Observable

private getItem(cartId: string, productId: string){
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();
}

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.pipe(take(1)).subscribe(item => {
        item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
    });
}

Answer 2

maybe instead of changing this line to return this.db.object('/shopping-carts/' + cartId + '/items/' + productId).valueChanges();

leave it as it was return this.db.object('/shopping-carts/' + cartId + '/items/' + productId) then in the function you are calling the getItem function before subscribing to it you can add value changes there should be something like

`private getItem(cartId: string, productId: string){
        return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
    }
 async addToCart(product: Product){
        let cartId = await this.getOrCreateCartId();
        let item$ = this.getItem(cartId, product.key).valueChanges();
        item$.pipe(take(1)).subscribe(item => {
            item$.update({ product: product, quantity:(item.quantity || 0) + 1 });
        });
    }`

Answer 3

async  addToCart(product:Product){

  let cartId= await this.getOrCreateCart();
  let item$$=this.getItem(cartId,product.key);
  let item$=this.getItem(cartId,product.key).snapshotChanges();
    item$.pipe(take(1)).subscribe(item=>{
      this.data=item.payload.val();

        if(this.data!= null){
          item$$.update({product:product,quantity:(this.data.quantity)+1});
        }else{
          item$$.set({product:product,quantity:1});
        }


    });
  }

Answer 4

As the time of writing this answer, In AngularFireObject you have to use either valueChanges() or snapshotChanges(). You can read the documentation here

Coming to your concern if you simply modify your code from

item$.pipe(take(1)).subscribe(item => {})

to

item$.valueChanges().pipe(take(1)).subscribe(item => {})

will solve your problem.

Answer 5

Make following changes in your code:

async addToCart(product: Product){
    let cartId = await this.getOrCreateCartId();
    let item$ = this.getItem(cartId, product.key);
    item$.snapshotChanges().pipe(take(1)).subscribe(item => {
       item$.update({ product: product, 
                      quantity: (item.payload.exportVal().quantity || 0) + 1 });
    });
}

Just check-out my Github repository My Github Link which is built in Angular 7. Your Angular 6 project will work fine.