时间戳

首页 > 解决方案 > Angular Firebasedatabase 错误无法读取未定义的属性“databaseURL”

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

问题描述

我在 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)

标签： angularfirebasefirebase-realtime-database

解决方案

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

};

推荐阅读