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/vendor.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.

Alexander Staroselsky Alexander Staroselsky · Accepted Answer · 2019-01-23T18:58:20

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!

How to configure firebase with angular 6?

1 Answers