Почему извлечение данных Firestore работает в версии ng-serve, но не в версии ng-build

Question

У меня есть интересная проблема, когда я могу без проблем или ошибок загрузить данные при локальном развертывании моего приложения с помощью ng-serve, но как только я запускаю ng-deploy и открываю веб-страницу, те же данные не загружаются нана странице, без явных ошибок.

Живое приложение: https://padder -939bc.firebaseapp.com / catalog

Ожидаемое поведение для списка из 3 продуктовимена, отображаемые под раскрывающимися списками (загружаются из коллекции Firestore).

TypeScript:

export class ProductFeedComponent implements OnInit {
  constructor(private seo: SeoService, private db: AngularFirestore) { }

  //import arrays of products
  products;
  filteredProducts;

  //filter types
  colour;
  room;
  brand;
  style; 
  price;

  documentField: string;

  //filters
  maxFilters = 5;
  selectedFilters;

  filters = [];
  filterValues = [];

  //model values

  ngOnInit() {
    this.seo.generateTags({
      title: 'Product Feed',
      description: 'A catalogue filled with products.'
    });

    this.filteredProducts = this.db.collection('products').valueChanges();
    console.log(this.filteredProducts);
  }

  filterProducts(colourValue: string, brandValue: string, roomValue: string, priceValue: string, styleValue: string){
    this.selectedFilters = 0;
    this.filters = [];
    this.filterValues = [];

    //workout how many filter parameters are required
    if (colourValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('colour');
      this.filterValues.push(colourValue);
    }

    if (brandValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('brand');
      this.filterValues.push(brandValue);
    }

    if (roomValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('room');
      this.filterValues.push(roomValue);
    }

    if (priceValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('price');
      this.filterValues.push(priceValue);
    }

    if (styleValue != undefined){
      this.selectedFilters = this.selectedFilters + 1;
      this.filters.push('style');
      this.filterValues.push(styleValue);
    }
    console.log(this.filters);
    console.log(this.filterValues);
    //apply filters based on selected criteria
    if(this.selectedFilters == 1)
    {
      this.filteredProducts = this.db.collection('products', ref => ref.where(this.filters[0], '==', this.filterValues[0])).valueChanges();
    }

    else if(this.selectedFilters == 2)
    {
      this.filteredProducts = this.db.collection('products', ref => ref.where(this.filters[0], '==', this.filterValues[0]).where(this.filters[1], '==', this.filterValues[1])).valueChanges();
    }   
  }


  //remove filters
  removeFilter(){
    this.filteredProducts = this.db.collection('products').valueChanges();
    this.selectedFilters = 0;
    this.filters = [];
    this.filterValues = [];
  }

HTML:

<p>Catalogue Page</p>

<h4>Filter by Colour</h4>
<select [(ngModel)]="colour" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="blue">Blue</option>
    <option value="black">Black</option>
    <option value="white">White</option>
</select>

<h4>Filter by Brand</h4>
<select ng [(ngModel)]="brand" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Price</h4>
<select [(ngModel)]="price" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Room</h4>
<select [(ngModel)]="room" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<h4>Filter by Style</h4>
<select [(ngModel)]="style" (change)="filterProducts(colour, brand, price, room, style)">
    <option value="all" selected>All</option>
    <option value="wayfair">Wayfair</option>
    <option value="made.com">Made</option>
</select>

<button *ngIf="colour" (click)="removeFilter()">
    Remove Filter
</button>

<div *ngFor="let product of filteredProducts | async">
    <h6>{{ product.productName }}</h6>
    <ul>
        <li>Colour: {{ product.colour }}</li>
    </ul>
</div>

Answer 1

Дважды проверьте настройку firebase , чтобы убедиться, что вы подключаетесь к правильной базе данных. У вас может быть другой enviornment.ts для dev и prod.