Error while fetching data from firebase database

Question

I am trying to fetch my data from the firebase database but i am getting the following error in my console

Firestore (5.8.3): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=failed-precondition]: The Cloud Firestore API is not available for Cloud Datastore projects.

service file

import { Injectable } from '@angular/core';
  import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class CategoryService {

constructor(private firestore: AngularFirestore) { }

getcategories(){
return this.firestore.collection('categories').snapshotChanges();
}
}

.ts file

import { Component, OnInit } from '@angular/core';
import { CategoryService } from 'src/app/category.service';

@Component({
selector: 'app-newproducts',
templateUrl: './newproducts.component.html',
styleUrls: ['./newproducts.component.scss']
})
export class NewproductsComponent implements OnInit {

categories

constructor( ctservice:CategoryService) { 
this.categories=ctservice.getcategories()

 }

ngOnInit() {
}

}

html file

<div class="md-form form-group mt-5">
<select class="browser-default custom-select">
<option value=""></option>
<option *ngFor="let c of categories | async " [value]="c.$key">
{{c.name}}
</option>

  </select>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';

import { Approuting } from './app-routing.module';
import { HeaderComponent } from './header/header.component';
import { ShoppingCartComponent } from './shopping-cart/shopping- 
cart.component';
import { LoginComponent } from './login/login.component';
import { UsernameComponent } from './username/username.component';
import { MyordersComponent } from 
'./username/myorders/myorders.component';
import { AdminordersComponent } from 
'./username/adminorders/adminorders.component';
import { AdminproductsComponent } from 
'./username/adminproducts/adminproducts.component';
import { LogoutComponent } from 
'./username/logout/logout.component';
import { HttpModule } from '@angular/http';
import { NewproductsComponent } from 
'./username/adminproducts/newproducts/newproducts.component';

import { CategoryService } from './category.service';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { AngularFirestore,FirestoreSettingsToken } from 
'@angular/fire/firestore';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
ShoppingCartComponent,
LoginComponent,
UsernameComponent,
MyordersComponent,
AdminordersComponent,
AdminproductsComponent,
LogoutComponent,
NewproductsComponent,

],
imports: [
BrowserModule,
MDBBootstrapModule.forRoot(),
Approuting,
HttpModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],
providers: [CategoryService,AngularFirestore,
{ provide: FirestoreSettingsToken, useValue: {} }
],
 bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

This error occurs when you are referencing a Firebase project that does not have Firestore active.

In this example Firestore was not enabled the the project being referenced. After enabling it, the error was gone.

In case anyone is unfamiliar, here are the steps to enable the Cloud Firestore per project.

• Log into the account the project is active in on the Firebase site
• Go to the console link
• Select the project you are trying to access (that the firebase config in the project is for)
• On the left side under the "Development" section, select the "Database" link
• Click the "Create Database" button for Cloud Firestore