我将angularfire2用于我的Angular网络应用程序,最近我升级到了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调用似乎很糟糕,但我不知道正确的方法。
答案 0 :(得分:3)
想出我的问题,我在初始化应用程序时不需要在app.module.ts中提供自定义名称。这很好用:
AngularFireModule.initializeApp(environment.firebaseConfig),
这很糟糕:
AngularFireModule.initializeApp(environment.firebaseConfig, 'myApp'),
答案 1 :(得分:0)
你必须在导入中放入新的实现模块并放入
您将使用提供商import * as firebase from 'firebase/app';
var 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]
})