Angularfire2 Firestore not pulling data from firebase

Question

I'm at a bit of a loss here. I'm trying to learn angular cli + firebase2 (using angularfire2 5.0.0-rc.6) and I'm having an issue reading values from my cloud firestore database.

I have followed several tutorials, as well as dug through the docs and by all measures from what I can tell it should be working.

My enviroments>enviroment.ts file is as follows (exact api strings redacted but copied directly from console web values).

export const environment = {
production: false,
  firebase: {
    apiKey: 'myapikey',
    authDomain: 'mydomain',
    databaseURL: 'mydburl',
    projectId: 'myprojectid',
    storageBucket: 'mystoragebucket',
    messagingSenderId: 'mymessageid'
  }
};

My app.module.ts is as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MenubarComponent } from './menubar/menubar.component';
import { HomeComponent } from './home/home.component';
import {AppRoutingModule} from './app-routing/app-routing.module';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { HttpClientModule } from '@angular/common/http';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { SlideShowComponent } from './slide-show/slide-show.component';


@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  declarations: [AppComponent, HomeComponent, MenubarComponent, SlideShowComponent]
})
export class AppModule { }

My component (slide-show) slide-show.component.ts is as follows:

import { Component, OnInit } from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection} from 'angularfire2/firestore';
import {Observable} from 'rxjs/Observable';


export interface Book {
  author: string;
  bgImage: string;
  cover: string;
  featured: boolean;
  published: boolean;
  teaser: boolean;
  title: boolean;
}

@Component({
  selector: 'app-slide-show',
  templateUrl: './slide-show.component.html',
  styleUrls: ['./slide-show.component.css']
})
export class SlideShowComponent implements OnInit {
  public collection: AngularFirestoreCollection<any>;
  public booksObservable: Observable<any[]>;
  public books: any[];

  constructor( afs: AngularFirestore ) {
    this.collection = afs.collection('books');
    this.booksObservable = this.collection.valueChanges();
    console.log( 'I am visible' );
    this.booksObservable.subscribe(data => {
      console.log(data);
      this.books = data;
    });
  }

  ngOnInit() {

  }

}

My slide-show.component.html is as follows:

<div class="container">
  <div class="spacer"></div>
  <div class="teaser">hello world test</div>
  <div class="menu-spacer">
    <ul>
      <li *ngFor="let item of booksObservable | async">
        {{item.author}}
      </li>
    </ul>
  </div>
  <div class="spacer"></div>
</div>

Due to the issues communicating I have changed my firestore.rules files to be the following:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

My database is set up as follows:

My first thought was that I was reading from the observable wrong... so as several examples directly iterated over the observable in HTML I added that too... My second thought was that it might be because I was testing on my local server so I installed the firebase command line tools and tried running a bundled version of the angular site using firebase serve (built using both "ng build" and "ng build -prod"). When that didn't work I attempted to host the built angular site on firebase. All resulted in the same response, I get nothing in my console (past the "I am visible" that I log to prove I am looking in the correct spot), then after some time (+5 min), occasionally, I get an empty array with the following console message:

Firestore (4.10.1) 2018-03-07T05:51:24.432Z: Could not reach Firestore backend.

When I failed to retrieve data from the collection I attempted to push data to a collection (at this point any would do) so I erased my database and attempted to use the following (inserted above line 29 in slide-show.component.ts)

this.collection.add({author: 'test1', title: 'test 1 title'});
this.collection.add({author: 'test2', title: 'test 2 title'});

This experiment resulted in both the front end console.log printing out the values, and the HTML printing the values (thanks RXJS) however, the firebase console never showed the additions.

I'm at a loss, feel free to ask for more information if you need it.

Answer 1

I'm feeling like an idiot right now, but upon digging into this more I enabled the Logging of XML requests in chrome and started watching the actual RXJS queries, and noticed a continual failure of the request. Thinking that was odd, I checked my add blockers (this one happened to be tunnlebear's blocker) and discovered it was blocking localhost. After adding it as an exception I no longer had issues communicating with the firebase firestore.

The issue was an ad blocker.

Answer 2

Had this error in my console, working ong angular project: @firebase/firestore: Firestore (5.0.2): Could not reach Firestore backend.

So I moved from Realtime Database to Cloud Firestore, and the error is gone. Maybe this error was stupid, and I left this comment just in case someone needs a solution.