@firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds

Question

I am working on an Angular 6 project. This is the error I get when I build with --prod flag, host and run. I've been sitting on this for a long time. Initially thought it was probably a problem with the firestore package and i waited. But now updated to firestore 5.0.4, the problem still exists.

[2018-06-04T06:11:47.859Z] @firebase/firestore: Firestore (5.0.4): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

app.module.ts

Imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
]

app.component.ts

constructor(public afAuth: AngularFireAuth,
          private afs: AngularFirestore,
          private db: AngularFireDatabase) {
    this._currentUser = this.afAuth.authState
      .pipe(
        switchMap((user: any) => {
           if (user) {
            console.log(user);
            return this.afs.collection('users').doc<User>(user.uid).valueChanges();
           } else {
             return Observable.create(null);
           }
        })
      );
}

FYI: Authentication still works.

dependencies firebase 5.0.4 angularfire2 5.0.0-rc.10

Answer 1

You should enable Firestore in you Firebase Console. Do the following steps:

1. Open the Firebase Console, open or create a new project.

2. In the Database section, click the Get Started button for Cloud Firestore.

3. Select a starting mode for your Cloud Firestore Security Rules: Test mode or Locked mode

4. Click Enable.

Cloud Firestore and App Engine: You can't use both Cloud Firestore and Cloud Datastore in the same project, which might affect apps using App Engine. Try using Cloud Firestore with a different project. When you create a Cloud Firestore project, it also enables the API in the Cloud API Manager.

Answer 2

I was having problems with my Kaspersky antivirus and AdBlock Chrome plugin

Possible problems:

• Slow internet connection
• Antivirus/Firewall related problem (blocking)
• AdBlocker problem (blocking too)

Answer 3

I was getting this randomly in both dev and production, this solved it for me. Set this to true: https://firebase.google.com/docs/reference/js/firebase.firestore.Settings#optional-experimentalautodetectlongpolling

You will need at least version 7.24.0 of the JS SDK.

https://firebase.google.com/support/release-notes/js#cloud-firestore_13

Here's how to do it using AngularFire: In app.module.ts (or other module that imports AngularFire).

 providers: [
    { provide: FirestoreSettingsToken, useValue: { experimentalAutoDetectLongPolling: true } }

Answer 4

in my case I just change the private network to public network

• open setting windows setting
• click network and sharing or check your network if it is private change to public may solve your problem

windows 10 network and sharing

Answer 5

This might help :)

Import only AngularFirestoreModule even if you are using the other modules such as the AngularFireStorage or AngularFireDatabase.

Not sure why but I have used this approach in many projects with no problems ;)

// Angular Fire Modules in my projects using auth, firestore, realtime db, & storage

AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule,