How to configure firebase with angular 6?

Question

I am beginner of angular 6. I am trying to configure angular 6 with firebase, but at the time of set data i am getting below error.

FirebaseError {code: "app/no-app", message: "Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp() (app/no-app).", name: "[DEFAULT]", ngDebugContext: DebugContext_, ngErrorLogger: ƒ, …} code: "app/no-app" message: "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." name: "[DEFAULT]" ngDebugContext: DebugContext_ {view: {…}, nodeIndex: 76, nodeDef: {…}, elDef: {…}, elView: {…}} ngErrorLogger: ƒ () stack: "[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).↵ at error ( http://localhost:4200/vendor.js:73214:21 )↵ at app ( http://localhost:4200/vendor.js:73097:13 )↵ at Object.serviceNamespace [as firestore] ( http://localhost:4200/vendor.js:73155:47 )↵ at RegiComponent.push../src/app/regi/regi.component.ts.RegiComponent.saveData ( http://localhost:4200/main.js:315:68 )↵ at Object.eval [as handleEvent] (ng:///AppModule/RegiComponent.ngfactory.js:214:27)↵ at handleEvent ( http://localhost:4200/vendor.js:55060:41 )↵ at callWithDebugContext ( http://localhost:4200/vendor.js:56154:25 )↵ at Object.debugHandleEvent [as handleEvent] ( http://localhost:4200/vendor.js:55857:12 )↵ at dispatchEvent ( http://localhost:4200/vendor.js:52509:25 )↵ at http://localhost:4200/ve ndor.js:52956:38 " proto : Error. Please have look of my app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { RegiComponent } from './regi/regi.component'; import { LoginComponent } from './login/login.component'; @NgModule({ declarations: [ AppComponent, RegiComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFirestoreModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

This is my environment.ts

 export const environment = { production: false, firebaseConfig: { apiKey: "AIzaSyBNTXxgG5hkzY3_E6E3VRwlMQ798wqBjXA", authDomain: "firsapp-f3cf4.firebaseapp.com", databaseURL: "https://firsapp-f3cf4.firebaseio.com", projectId: "firsapp-f3cf4", storageBucket: "firsapp-f3cf4.appspot.com", messagingSenderId: "736958488941" } //firebase.initializeApp(firebaseConfig); }; 

Below is my function i am calling on click

 saveData($event){ let name : string; let email : string; let passWord : string; let city : string[]; //var database = firebase.database(); // Add a new document in collection "cities" let db = firebase.firestore(); // Add a new document in collection "cities" db.collection("cities").doc("LA").set({ city : ['A','B', 'C', 'D'], }) .then(function() { console.log("Document successfully written!"); }) .catch(function(error) { console.error("Error writing document: ", error); }); 

Please help me if you need any further info please know me.

Answer 1

Try the following using angularfire2 service AngularFirestore instead of directly trying to access 'firebase`. You can stream data from the collection using either valueChanges() or snapshotChanges() and utilize RxJS operators to additional work with the data as needed.

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  // Should ideally use strong types instead of 'any' for better IDE support
  private itemsCollection: AngularFirestoreCollection<any>;
  items: Observable<any[]>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<any>('cities');
    this.items = this.itemsCollection.valueChanges();
  }

  ngOnInit() {
    // use RxJS operators to use the data as needed
    this.items.subscribe(cities => console.log(cities));
  }

  saveData() {
    this.itemsCollection.doc('LA').set({ city:  ['A','B', 'C', 'D']} );
  }
}

I'd highly recommend to review all the angularfire2 Cloud Firestore docs before continuing as well.

Hopefully that helps!