I'am trying to connect to Firestore for my AngularApp (Angular 10) and it's not connecting its logging the below error in the console and no data is apperaing when I'm subscribing to the snapshot of the firestore collection.
Console Logs:
index.esm.js:106 [2020-09-05T09:53:01.695Z] @firebase/firestore: Firestore (7.19.1): 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.
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
My Service
import { Injectable } from '@angular/core';
import {EdcellEvent} from 'src/app/models/edcell_event/edcell-event.model';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class FirestoreEdcellEventsService {
constructor(private firestore: AngularFirestore) { }
getEvents() {
console.log(this.firestore.collection('events'));
return this.firestore.collection('events').snapshotChanges();
}
createEvent(edcell_event:EdcellEvent){
return this.firestore.collection('events').add(edcell_event);
}
}
My Component
import { Component, OnInit, NgZone } from '@angular/core';
import { FirestoreEdcellEventsService } from 'src/app/services/firestore-edcell-events.service';
import { EdcellEvent } from 'src/app/models/edcell_event/edcell-event.model';
import { from } from 'rxjs';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
edcell_events: EdcellEvent[];
constructor(private ngZone: NgZone, private edcell_event_sevice: FirestoreEdcellEventsService) { }
myevent: EdcellEvent = {
id: "",
title: "Title",
descrition: "Des",
link: "htttppp",
img: "htpsjpg",
};
submit() {
this.edcell_event_sevice.createEvent(this.myevent);
console.log('clicked submit');
}
ngOnInit(): void {
console.log(this.edcell_event_sevice.getEvents());
this.edcell_event_sevice.getEvents().subscribe(data => {
this.edcell_events = data.map(e => {
console.log("Data >>", e);
return {
id: e.payload.doc.id,
...e.payload.doc.data() as {},
} as EdcellEvent;
})
});
}
}
