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

【问题标题】：Angular Firebasedatabase error Cannot read property 'databaseURL' of undefinedAngular Firebasedatabase 错误无法读取未定义的属性“databaseURL”
【发布时间】：2018-05-24 05:01:40
【问题描述】：

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

在组件中，我导入了 AngularFireDatabase 并写

应用模块

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 { }

环境

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() {
  }

}

我有错误 无法读取未定义的属性“databaseURL”[![在此处输入图像描述][1]][1]

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)

【问题讨论】：

您能否将错误堆栈跟踪发布为文本而不是图像
好的，谢谢 - 1 秒
您需要在订阅之前执行valueChanges() 或snapshotChanges()。我不完全确定这是原因..除非您使用的是旧版本的 angularfire2
我使用 firebase2 和 angular4 版本
您的仓库中没有包含任何实际的重要文件，因此很难提供帮助。例如，您的 index.html 在哪里？你在哪里初始化firebase？你是如何导入 AngularFire 的？你的 app.module 在哪里？你的 package.json 在哪里？

标签： angular firebase firebase-realtime-database

【解决方案1】：

在你的文件 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"
     }

};

【讨论】：

我添加到你我忘了把 observable 放在组件中

【解决方案2】：

我今天遇到了同样的问题并以一种方式解决了。您将 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 错误的确切方法。

【讨论】：

【解决方案3】：

该错误消息暗示尚未使用配置对象（包含 databaseUrl）初始化 firebase。

您确定按照web setup docs 中的说明拨打firebase.initializeApp 吗？

【讨论】：

是的，我初始化它 AngularFireModule.initializeApp(environment.firebase),
inside import [] app-modal file
你确定initializeApp 被称为之前 db.list？尝试在这两个地方设置断点并启动您的应用程序。