在 AngularFire2 v4 中使用“firebase”

Posted 2023-02-19

【中文标题】在 AngularFire2 v4 中使用“firebase”

【英文标题】：Using "firebase" with AngularFire2 v4

【发布时间】：2017-10-08 02:13:15

【问题描述】：

我将 angularfire2 用于我的 Angular Web 应用程序，并且我最近升级到了 v4.0.0-rc0。它在几个方面表现不同。我需要帮助的事情是在 v4.0.0 版本中沿 angularfire2 使用“firebase”（常规 Firebase JS 库）。在以前的版本中，您将导入：

import * as firebase from 'firebase';

然后使用带有如下语句的常规 Firebase JS 库：

firebase.database().ref().child("message").set("hi");

这在以前的版本中运行良好，有关该方法的更多信息，请参阅此视频（这是使用存储时的要求）： https://www.youtube.com/watch?v=nMR_JPfL4qg#t=6m11s

但是，当我尝试对 v4.0.0-rc0 执行相同操作时，我收到以下错误消息：

Firebase：没有创建 Firebase 应用“[DEFAULT]” - 调用 Firebase App.initializeApp() (app/no-app)。

我可以阅读该消息并意识到它认为尚未调用 initializeApp。但是如果我像这样使用 angularfire2 v4 代码...

this.afDatabase.object("somepath").subscribe( (myData: any) => 
      console.log("My data", data); 
     );

这一切都很好，因为我在我的 app.module.ts 中使用了 initializeApp。所以真正的问题是之前的那一行：

AngularFireModule.initializeApp(environment.firebaseConfig),

适用于 angularfire2 和常规 Firebase JS 库，但现在不适用了。现在为数据库使用常规 Firebase JS 库的正确方法是什么？我也可以在 app.module.ts 中调用 firebase.initializeApp 吗？当然，进行 2 次 initializeApp 调用似乎很糟糕，但我不知道正确的方法。

【问题讨论】：

你是否将模块更改为延迟加载？

【参考方案1】：

解决了我的问题，当我初始化应用程序时，我不需要在 app.module.ts 中提供自定义名称。这工作正常：

AngularFireModule.initializeApp(environment.firebaseConfig),

这很糟糕：

AngularFireModule.initializeApp(environment.firebaseConfig, 'myApp'),

【讨论】：

刚遇到同样的问题。 docs 似乎还没有更新。

【参考方案2】：

您必须将新的实施模块放入您的导入中并放入 import * as firebase from 'firebase/app'; 在你要使用的组件中 providersvar provider = new firebase.auth.GoogleAuthProvider();

      import  AngularFireModule  from 'angularfire2';
      import  AngularFireDatabaseModule  from 'angularfire2/database';
      import  AngularFireAuthModule  from 'angularfire2/auth';

      export const environment = 
        production: false,
        firebase: 
          apiKey: "dfgdfgdsfgdfgsdfg",
          authDomain: "fire-dfgdfg.sdfgdfg.com",
          databaseURL: "https://fire-dsfgdfg.dfgdfgdf.com",
          projectId: "fire-dfgdfg",
          storageBucket: "fire-dfgdfg.appspot.com",
          messagingSenderId: "65456456464654"
        
      

      @NgModule(
        imports: [
          BrowserModule,
          BrowserAnimationsModule,
          AppRoutingModule,
          BsDropdownModule.forRoot(),
          TabsModule.forRoot(),
          ChartsModule,
          AngularFireModule.initializeApp(environment.firebase),
          AngularFireDatabaseModule,
          AngularFireAuthModule
        ],
        declarations: [
          AppComponent,
          FullLayoutComponent,
          SimpleLayoutComponent,
          ChatLayoutComponent,
          NAV_DROPDOWN_DIRECTIVES,
          BreadcrumbsComponent,
          SIDEBAR_TOGGLE_DIRECTIVES,
          AsideToggleDirective
        ],
        providers: [
          provide: LocationStrategy,
          useClass: HashLocationStrategy
        ],
        bootstrap: [AppComponent]
      )