Angular Firebasedatabase错误无法读取未定义的属性“databaseURL”

时间:2018-05-24 05:01:40

标签: angular firebase firebase-realtime-database

我在角度4上安装firebase,然后将其添加到app-module上 并且在环境中获取配置脚本我也改变了我将真实地从rull改为true

并在组件i中导入AngularFireDatabase 并写下

app-module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';

import {environment} from '../environments/environment';
import { AppComponent } from './app.component';
import { UsersComponent } from './component/users/users.component';


@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

enviromnet

export const environment = {
  production: false
  firecase:{
    apiKey: "AIzaSyCD3yDwF7qBcepnAXEspXbfchMtaGncHtg",
    authDomain: "courses-4d546.firebaseapp.com",
    databaseURL: "https://courses-4d546.firebaseio.com",
    projectId: "courses-4d546",
    storageBucket: "courses-4d546.appspot.com",
    messagingSenderId: "760508178350"
  }

};

组件

import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  courses: any[];

constructor(db: AngularFireDatabase) {
  db.list('/courses')
    .subscribe(courses =>{
    this.courses=courses;
    console.log(this.courses);
  })
}

  ngOnInit() {
  }

}

我有错误 无法读取未定义[![在此处输入图像说明] [1]] [1]

的属性'databaseURL'
AppComponent.html:2 ERROR TypeError: Cannot read property 'databaseURL' of undefined
    at RepoManager.databaseFromApp (index.cjs.js:14981)
    at Object.instance.INTERNAL.registerService.Reference [as database] (index.cjs.js:15328)
    at FirebaseAppImpl._getService (index.cjs.js:134)
    at FirebaseAppImpl.(:4200/anonymous function) [as database] (webpack-internal:///./node_modules/@firebase/app/dist/index.cjs.js:323:31)
    at eval (database.js:11)
    at ZoneDelegate.invoke (zone.js:388)
    at Zone.run (zone.js:138)
    at NgZone.runOutsideAngular (core.js:4708)
    at new AngularFireDatabase (database.js:9)
    at _createClass (core.js:10943)

3 个答案:

答案 0 :(得分:2)

在您的文件app-module中调用此

AngularFireModule.initializeApp(environment.firebase),

所以你需要在环境中使 firebase 而不是 firecase 所以你的环境必须看起来像

export const environment = {
     production: false
     firebase:{
        apiKey: "AIzaSyCD3yDwF7qBcepnAXEspXbfchMtaGncHtg",
        authDomain: "courses-4d546.firebaseapp.com",
        databaseURL: "https://courses-4d546.firebaseio.com",
        projectId: "courses-4d546",
        storageBucket: "courses-4d546.appspot.com",
        messagingSenderId: "760508178350"
     }

};

答案 1 :(得分:1)

我今天遇到了同样的问题,并以一种方式解决了。您将Firebase配置放置在environment.ts文件中。而不是像这样将数据放在app.module.ts中。

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import {AngularFireModule} from 'angularfire2';
 import {AngularFireDatabaseModule} from 'angularfire2/database';

 import {environment} from '../environments/environment';
 import { AppComponent } from './app.component';
 import { UsersComponent } from './component/users/users.component';

 export const firebaseConfig = {
    apiKey: "AIzaSyCD3yDwF7qBcepnAXEspXbfchMtaGncHtg",
    authDomain: "courses-4d546.firebaseapp.com",
    databaseURL: "https://courses-4d546.firebaseio.com",
    projectId: "courses-4d546",
    storageBucket: "courses-4d546.appspot.com",
    messagingSenderId: "760508178350"
 }

 @NgModule({
   declarations: [
     AppComponent,
     UsersComponent
   ],
   imports: [
     BrowserModule,
     AngularFireModule.initializeApp(firebaseConfig),
     AngularFireDatabaseModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

这可行,但是我不知道解决databaseURL错误的确切方法。

答案 2 :(得分:0)

错误消息暗示firebase尚未使用配置对象(包含databaseUrl)进行初始化。

您确定是否按照web setup docs

中的说明致电firebase.initializeApp