为啥我在尝试从 Angular 2 应用程序连接和查询 Firebase 数据库时收到此错误消息？

Posted 2023-02-22

【中文标题】为啥我在尝试从 Angular 2 应用程序连接和查询 Firebase 数据库时收到此错误消息？

【英文标题】：Why am I obtaining this error message trying to connect and query a Firebase DB from an Angular 2 application?为什么我在尝试从 Angular 2 应用程序连接和查询 Firebase 数据库时收到此错误消息？

【发布时间】：2018-06-12 06:22:20

【问题描述】：

我是 Angular 和 Firebase 的新手，我在尝试将简单的 Angular 应用程序链接到 Firebase 测试数据库时发现了一些困难（我正在关注 Udemy 的教程，但我不明白我为什么要尝试这个问题） .

我有这个 AppComponent 主类：

import  Component  from '@angular/core';
import database, initializeApp from 'firebase/app';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'app works!';

  constructor() 

    // Initialize Firebase:
    var config = 
      apiKey: "AIzaSyAkgFXyAr8UeD9NPM2zU3J32CR_NvaBYHc",
      authDomain: "final-project-recording-bb15d.firebaseapp.com",
      databaseURL: "https://final-project-recording-bb15d.firebaseio.com",
      projectId: "final-project-recording-bb15d",
      storageBucket: "final-project-recording-bb15d.appspot.com",
      messagingSenderId: "295297957366"
    ;


    initializeApp(config);


    var root = database().ref('testArray');

    root.on('value', function(snap) 
      console.log(snap.val());

    );


  

如您所见，我简单地定义了一个构造函数，并在该构造函数中声明了包含与连接信息相关的信息的 var 对象。然后我通过这些配置信息初始化我的应用程序。最后，我在我的 Firebase DB 中定义的特定 testArray 节点上注册了我的应用程序的根节点，并为该节点上的更改设置了一个侦听器。

问题是，当我使用 ng serve 语句运行应用程序时，我的 IDE 控制台没有收到任何错误，但我的浏览器 javascript 控制台出现以下异常：

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Object(...) is not a function
    at new AppComponent (app.component.ts:28)
    at createClass (core.js:12468)
    at createDirectiveInstance (core.js:12315)
    at createViewNodes (core.js:13776)
    at createRootView (core.js:13665)
    at callWithDebugContext (core.js:15090)
    at Object.debugCreateRootView [as createRootView] (core.js:14373)
    at ComponentFactory_.create (core.js:11260)
    at ComponentFactoryBoundToModule.create (core.js:4031)
    at ApplicationRef.bootstrap (core.js:5855)
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:14647
DebugContext_.logError @ core.js:15030
ErrorHandler.handleError @ core.js:1488
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4753
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:870
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4744
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:12
../../../../../src/main.ts @ main.bundle.js:60
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:83
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
AppComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ view: …, nodeIndex: 1, nodeDef: …, elDef: …, elView: …
View_AppComponent_Host_0 @ AppComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:14647
DebugContext_.logError @ core.js:15030
ErrorHandler.handleError @ core.js:1493
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4753
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:870
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4744
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:12
../../../../../src/main.ts @ main.bundle.js:60
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:83
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
zone.js:680 Unhandled Promise rejection: Object(...) is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Object(...) is not a function
    at new AppComponent (app.component.ts:28)
    at createClass (core.js:12468)
    at createDirectiveInstance (core.js:12315)
    at createViewNodes (core.js:13776)
    at createRootView (core.js:13665)
    at callWithDebugContext (core.js:15090)
    at Object.debugCreateRootView [as createRootView] (core.js:14373)
    at ComponentFactory_.create (core.js:11260)
    at ComponentFactoryBoundToModule.create (core.js:4031)
    at ApplicationRef.bootstrap (core.js:5855) TypeError: Object(...) is not a function
    at new AppComponent (webpack-internal:///../../../../../src/app/app.component.ts:29:82)
    at createClass (webpack-internal:///../../../core/esm5/core.js:12664:20)
    at createDirectiveInstance (webpack-internal:///../../../core/esm5/core.js:12511:37)
    at createViewNodes (webpack-internal:///../../../core/esm5/core.js:13972:53)
    at createRootView (webpack-internal:///../../../core/esm5/core.js:13861:5)
    at callWithDebugContext (webpack-internal:///../../../core/esm5/core.js:15286:42)
    at Object.debugCreateRootView [as createRootView] (webpack-internal:///../../../core/esm5/core.js:14569:12)
    at ComponentFactory_.create (webpack-internal:///../../../core/esm5/core.js:11456:46)
    at ComponentFactoryBoundToModule.create (webpack-internal:///../../../core/esm5/core.js:4227:29)
    at ApplicationRef.bootstrap (webpack-internal:///../../../core/esm5/core.js:6051:57)
api.onUnhandledError @ zone.js:680
handleUnhandledRejection @ zone.js:707
_loop_1 @ zone.js:697
api.microtaskDrainDone @ zone.js:701
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:12
../../../../../src/main.ts @ main.bundle.js:60
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:83
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

使用调试器在尝试执行此行时似乎会发生错误：

var root = database().ref('testArray');

为什么我会收到此错误消息？我错过了什么？这些错误消息究竟意味着什么？我该如何尝试修复它？

谢谢

【问题讨论】：

您使用的是哪个版本的 firebase

【参考方案1】：

import * from 'firebase/app';

firebase.initializeApp(config)

您需要从 firebase 中选择模块 initializeApp。

import  Component  from '@angular/core'; import * from 'firebase/app';

@Component(   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] ) export class AppComponent    title = 'app works!';

  constructor() 

    // Initialize Firebase:
    var config = 
      apiKey: "AIzaSyAkgFXyAr8UeD9NPM2zU3J32CR_NvaBYHc",
      authDomain: "final-project-recording-bb15d.firebaseapp.com",
      databaseURL: "https://final-project-recording-bb15d.firebaseio.com",
      projectId: "final-project-recording-bb15d",
      storageBucket: "final-project-recording-bb15d.appspot.com",
      messagingSenderId: "295297957366"
    ;


    firebase.initializeApp(config);


    var root = database().ref('testArray');

    root.on('value', function(snap) 
      console.log(snap.val());

    );


   

【讨论】：

我按照您的建议尝试了，但似乎无法正常工作，请您提供整个课程的代码吗？ （也许我错过了什么......）