Как настроить firebase с угловой 6?

Question

Я новичок в angular 6. Я пытаюсь настроить angular 6 с помощью firebase, но во время установки данных я получаю ошибку ниже.

FirebaseError {code: "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 / no-app)». имя: "[ПО УМОЛЧАНИЮ]" ngDebugContext: DebugContext_ {view: {…}, nodeIndex: 76, nodeDef: {…}, elDef: {…}, elView: {…}} ngErrorLogger: ƒ () stack: "[DEFAULT]: Firebase: приложение Firebase '[DEFAULT]' не создано - вызовите Firebase App.initializeApp () (app / no-app) .↵ при ошибке (http://localhost:4200/vendor.js:73214:21)↵ в приложении (http://localhost:4200/vendor.js:73097:13)↵ в Object.serviceNamespace [как хранилище] (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 [как handleEvent] (http://localhost:4200/vendor.js:55857:12)↵ при отправкеEvent (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);
    });

Пожалуйста, помогите мне, если вам нужна дополнительная информация, пожалуйста, знайте меня.

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 docs , прежде чем продолжить.

Надеюсь, это поможет!