AngularFire2入门遇阻：无法连接Firestore后端求助

Hey there, let's tackle this frustrating "cannot reach firestore backend" error you're hitting. Since your Vanilla Firebase setup works perfectly, we can rule out core Firebase project issues—so let's focus on AngularFire2-specific configurations and dependencies in your code.

1. Check AngularFire2 & Firebase Version Compatibility #

Looking at your package.json, you're using:

• angularfire2: ^5.0.0-rc.7
• firebase: ^5.0.2
• Angular 6.x

AngularFire2's release candidates (like rc.7) often have partial compatibility with newer Angular versions. Angular 6 requires a stable AngularFire2 version that supports RxJS 6 and Angular's updated dependency injection system.

Fix: Upgrade to a compatible stable version pair. Update your package.json dependencies to:

"angularfire2": "^5.1.1",
"firebase": "^5.5.1"

Then run npm install to pull in the updated packages.

2. Add Error Handling to Debug the Exact Issue #

Right now, your component isn't catching Firestore errors, which hides critical details about why the connection is failing. Let's add error handling to get more context:

Update your app.component.ts:

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li class="text" *ngFor="let item of items | async">
        {{item.name}}
      </li>
    </ul>
  `,
  styles: []
})
export class AppComponent {
  title = 'app';
  items: Observable<any[]>;

  constructor(db: AngularFirestore) {
    this.items = db.collection('text').valueChanges()
      .pipe(
        catchError(err => {
          console.error('Firestore Connection Error:', err);
          return throwError(err);
        })
      );
  }
}

Check your browser's console after running the app—this will show the full error stack, which might point to issues like incorrect project settings or network restrictions.

3. Verify Firestore Initialization & Configuration #

Double-check these details in your setup:

• Ensure environment.firebase in environment.ts matches the exact configuration from your Firebase project dashboard (same API key, project ID, auth domain, etc.). Even a tiny typo here can break the connection.
• Confirm your Firestore database is actually created in the Firebase console (it's not auto-created when you add the SDK—you need to manually set it up and choose a region).
• If you're testing locally, make sure you don't have any browser extensions (like ad blockers) blocking Firebase requests.

4. Optional: Enable Firestore Persistence (If Needed) #

In some cases, enabling local persistence can resolve flaky connection issues. Update your AppModule to include this:

import { AngularFirestoreModule } from 'angularfire2/firestore';

@NgModule({
  imports: [
    // ... other imports
    AngularFirestoreModule.enablePersistence()
  ]
})
export class AppModule { }

Note: This requires your app to be served over HTTPS (except for localhost, which is allowed).

Final Notes #

The most likely culprit here is version incompatibility between Angular 6, AngularFire2 rc.7, and Firebase 5.0.2. Upgrading to the stable versions I mentioned should resolve the connection issue. If not, the error logging we added will give you clearer clues about what's going wrong.

内容的提问来源于stack exchange，提问作者user3219849