我已经尝试按照Angular2 setup steps跟随信件,但在控制台出错时遇到了一些麻烦:
错误错误:未捕获(在承诺中):错误:没有AngularFireDatabase的提供者!
登录-in.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SignInComponent } from './sign-in.component';
import { AngularFireModule } from 'angularfire2';
import { fireBaseEnvironment } from '../environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'), // imports firebase/app needed for everything
AngularFireDatabaseModule, // imports firebase/database, only needed for database features
AngularFireAuthModule, // imports firebase/auth, only needed for auth features
],
declarations: [ SignInComponent ],
bootstrap: [ SignInComponent ]
})
export class SignInModule {}
登录-in.component.ts
import {
Component,
OnInit
} from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@Component({
selector: 'sign-in',
template: `
<p> Hi, this is the sign in bits jimmy</p>
<p>Click this to go to another place <a [routerLink]=" ['../detail'] " >Detail</a>
<ul>
<li class="text" *ngFor="let item of items | async">
{{item.$value}}
</li>
</ul>
`
})
export class SignInComponent {
public jimmy: 'testing';
public items: FirebaseListObservable<any[]>;
constructor(db: AngularFireDatabase) {
this.items = db.list('/items');
}
}
任何想法可爱的人?
答案 0 :(得分:0)
AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name')
变量&#39; FireBaseEnvoriment&#39;包含firebase的数据,它不需要
.firebase
,那将是这样的:
AngularFireModule.initializeApp(fireBaseEnvironment, 'my-app-name')
答案 1 :(得分:0)
您收到该错误,因为在v.4.0中您需要将所有模块用于数据库和auth,配置参见第8行
`
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from
'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
@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]
})`
答案 2 :(得分:0)
现在Angular库升级到AngularFire 5.0
检查此网站 https://github.com/angular/angularfire2/blob/HEAD/docs/version-5-upgrade.md
items: Observable<any[]>;
constructor(af: AngularFireDatabase) {
af.list('/Items').valueChanges().subscribe(console.log);
}
答案 3 :(得分:-2)
将AngularFireDatabaseProvider
添加到providers
而不是initialize
的模块,因为它是提供者:
imports: [
... ,
AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'),
...
]
provider: [
AngularFireDatabaseProvider,
AngularFireAuthProvider
]