如何使用angular 6配置Firebase？

Question

我是angular 6的初學者。我正在嘗試使用firebase配置angular 6，但是在設置數據時，我的狀態低於錯誤。

FirebaseError {代碼：“ app / no-app”，消息：“ Firebase：沒有Firebase應用程序'[DEFAULT]'已創建...-調用Firebase App.initializeApp（）（app / no-app）。”，名稱：“ [DEFAULT]”，ngDebugContext：DebugContext_，ngErrorLogger：ƒ，…}代碼：“ app / no-app”消息：“ Firebase：未創建Firebase應用程序'[DEFAULT]'-調用Firebase App.initializeApp（）（app /不應用）。” 名稱：“ [[DEFAULT]”” ngDebugContext：DebugContext_ {view：{…}，nodeIndex：76，nodeDef：{…}，elDef：{…}，elView：{…}} ngErrorLogger：ƒ（）堆棧：“ [DEFAULT] ：Firebase：未創建Firebase應用程序'[DEFAULT]'-調用Firebase App.initializeApp（）（app / no-app）.↵錯誤（ http：// localhost：4200 / vendor.js：73214：21 ） app在應用程序上（ http：// localhost：4200 / vendor.js：73097：13 ）↵在RegiComponent上的Object.serviceNamespace [作為Firestore ]（ http：// localhost：4200 / vendor.js：73155：47 ）↵在Object.eval上推送../src/app/regi/regi.component.ts.RegiComponent.saveData（http：// localhost：4200 / main.js：315：68 ）↵[作為handleEvent]（ng：// /AppModule/RegiComponent.ngfactory.js:214:27)↵在handleEvent（ http：// localhost：4200 / vendor.js：55060：41 ）↵在callWithDebugContext（ http：// localhost：4200 / vendor.js：56154 ：25 ）↵在Object.debugHandleEvent [作為handleEvent]（ http：// localhost：4200 / vendor.js：55857：12 ）↵在dispatchEvent（ http：// localhost：4200 / vendor.js：52509：25 ）↵在http：// localhost：4200 / ve ndor.js：52956：38 “ proto ：錯誤。 請看看我的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 { } 

這是我的環境

 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); }; 

以下是我在點擊時要調用的函數

 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); }); 

如果您需要任何進一步的信息，請幫助我，請了解我。

Answer 1

使用angularfire2服務AngularFirestore嘗試以下操作，而不是直接嘗試訪問“ firebase ”。 您可以使用valueChanges（）或snapshotChanges（）從集合中流式傳輸數據，並根據需要利用RxJS運算符對數據進行其他處理。

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']} );
  }
}

我強烈建議您先閱讀所有angularfire2 Cloud Firestore 文檔，然后再繼續。

希望有幫助！