Get data from Firebase using angularfire2 (The doc example)

Question

I'm trying to get the database from Firebase. I have walked through this tutorial. After I run ng serve nothing happened and I have this error in the console:

[2018-05-21T12:25:48.364Z] @firebase/firestore: Firestore (5.0.3): Could not reach Firestore backend.

environment.ts:

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyCip0O3rjU6AXHUKZg7Z26hpLZThTfStsA",
    authDomain: "clientpanel-c4a89.firebaseapp.com",
    databaseURL: "https://clientpanel-c4a89.firebaseio.com",
    projectId: "clientpanel-c4a89",
    storageBucket: "clientpanel-c4a89.appspot.com",
    messagingSenderId: "894070096713"
  }
};

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// FIREBASE / ANGULARFIER2
import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';

// COMPONENTS
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('/client').valueChanges();
  }
}

app.component.html:

<h2>The list</h2>

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.email}}
  </li>
</ul>

And finally, This is My Firebase

You should remove all the *environment.ts* content from this post. That information is *not* meant to be public. — R. Richards, May 21 '18 at 13:17
did you change your permission to read and write in firebase ? — Chellappan வ, May 21 '18 at 13:35
@R.Richards In the case of Firebase, those specific keys are actually totally fine to share (although they're not needed for an MCVE here). See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Frank van Puffelen, May 21 '18 at 14:17
Not yet. I will try @TimM solution and see what will be happened. — Budi Salah, May 22 '18 at 22:54

Tim Martens · Answer 1 · 2018-05-29T05:27:28.720

0

Your screenshot shows that you are using the firebase Real-time Database, but your code uses the firebase Cloud Firestore.

Change AngularFirestore to AngularFireDatabase.

Working example with your database: https://stackblitz.com/edit/so002

-OR-

Move your data to the Cloud Firestore

edited May 29 '18 at 05:27

answered May 22 '18 at 11:20

Tim Martens

1,464
9
18

Get data from Firebase using angularfire2 (The doc example)

1 Answers1