时间戳

首页 > 解决方案 > 如何使用 Angular 6 配置 Firebase？

angular - 如何使用 Angular 6 配置 Firebase？

问题描述

我是 Angular 6 的初学者。我正在尝试使用 Firebase 配置 Angular 6，但是在设置数据时我遇到了错误。

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: ƒ, ...} 代码: "app/no-app" 消息: "Firebase: 没有创建 Firebase App '[DEFAULT]' - 调用 Firebase App.initializeApp() (app /无应用程序）。” name: "[DEFAULT]" ngDebugContext: DebugContext_ {view: {…}, nodeIndex: 76, nodeDef: {…}, elDef: {…}, elView: {…}} ngErrorLogger: ƒ () stack: "[DEFAULT] : Firebase: 没有创建 Firebase App '[DEFAULT]' - 调用 Firebase App.initializeApp() (app/no-app).↵ 出错 ( http://localhost:4200/vendor.js:73214:21 ) ↵ 在应用程序 ( http://localhost:4200/vendor.js:73097:http://localhost:4200/vendor.js:73155:47 )↵ 在 RegiComponent.push../src/app/regi/regi.component.ts.RegiComponent.saveData ( http://localhost:4200/main. js:315:68 )↵ 在 Object.eval [as 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 [as handleEvent] ( http://localhost:4200/vendor.js:55857:12 )↵在 dispatchEvent ( http://localhost:4200/vendor.js:52509:25 )↵ 在http://localhost:4200/vendor.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 { }

这是我的环境.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);
};

以下是我在点击时调用的函数

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

如果您需要任何进一步的信息，请帮助我，请认识我。

标签： angulartypescriptfirebasegoogle-cloud-firestore

解决方案

使用 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文档。

希望这会有所帮助！

推荐阅读