I noticed in Chrome devtools that my application (Angular) is making many requests. What could be wrong?

Question

//SERVICE import { Injectable } from '@angular/core'; import { Angularfirestore, Angularfirestorecollection } from '@angular/fire/firestore'; import { Product } from '.. /model/product'; //import * as rxjs from 'rxjs' import { filter, map, reduce, tap, toArray, share,take } from 'rxjs/Operators/'

@Injectable({ providedIn: 'root' }) export class Productservice { productCollection: Angularfirestorecollection constructor(private afire: Angularfirestore) { this.productCollection = this.afire.Collection('products'); }

getAllProduct() { Return this.productCollection.snapshotChanges() pipe( map(changes => changes.map(a => { Let data = a.payload.doc.data(); Let id = a.payload.doc.id Return { id, ...data } }), take(1), share() ) }

getProducts(id) { Return this.afire.doc('products/' + id). valueChanges(); }

addProduct(Product: Product) { Return this.productCollection.add(Prod) /{ nomeProduct: Prod.nomeProduct, quantity Stock: Value of category: Prod.category, minimum Stock: Minimum Stock, type: pre-type., discontinued: Prior to discontinued }/

} getProductByName(name: string) { // Return this.afire.Collection('products', ref => ref.Where('productProdut', '==', name). valueChanges() Return this.afire.Collection('products'). valueChanges() pipe( map(Prods => {
if (name != "") { Return Prods.filter(p => p.Produt.toLowerCase().includes(name.toLowerCase()) }Else{ Return null } }))

}

update(Product: key: string) this.afire.doc('products/' + key). update(product) } }

//PRODUCT-LIST COMPONENT import { Component, Oninit, Input } from '@angular/core'; import { Product } from 'src/app/model/product'; import { Productservice } from 'src/app/services/product.service'; import { Observable } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, take } from 'rxjs/Operators'; import { Formcontrol } from '@angular/Forms'; import { THIS_EXPR } from '@angular/Compiler/src/output/output_ast';

@Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['. /product-list.component.scss'] }) export class Productlistcomponent Implements Oninit { products: Observable<Product[]> searchField: Formcontrol Prod: Observable<Product[]> constructor(private service: Productservice) { this.searchField = new Formcontrol() this.Prod = this.searchField.valueChanges pipe( debaucherTime(400), distinctUntilChanged(), switchMap(term => this.service.getProductByName(term)) ) }

ngOnInit(): void {

this.products = this.service.getAllProduct()

}

}