After attempting to follow a tutorial on Angular + Firebase, I encountered some issues with version compatibility. The tutorial was based on Angular 4, but my current version is Angular 6. Additionally, the versions of Firebase and AngularFire2 that I am using are higher than those in the tutorial, reflecting the latest updates.
This led to an error message:
https://i.stack.imgur.com/73WKJ.png
Here is a snippet of my source code:
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '../../node_modules/angularfire2/database';
import { Product } from './models/product';
import { take, map } 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 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.db.object('/shopping-carts/' + cartId + '/items' + product.key).valueChanges();
item$.take(1).subscribe(item => {
if (item.$exists()) {
item$.update({ quantity: item.quantity + 1});
} else {
item$.set({ product: product, quantity: 1});
}
});
}
}