[英]Angular2 No provider for AngularFireDatabase injection error
I have tried to follow the Angular2 setup steps to the letter, but am having a bit of trouble with an error in the console:我已经尝试按照Angular2 设置步骤进行操作,但是在控制台中出现错误时遇到了一些麻烦:
ERROR Error: Uncaught (in promise): Error: No provider for AngularFireDatabase!错误错误:未捕获(承诺):错误:没有 AngularFireDatabase 的提供者!
sign-in.module.ts登录.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 {}
sign-in.component.ts登录.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');
}
}
Any ideas lovely people?任何想法可爱的人?
AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name')
The variable 'FireBaseEnvoriment' contains the data of the firebase,it does not need the变量 'FireBaseEnvoriment' 包含火力的数据,它不需要
.firebase
.firebase
, then would be to look like this: ,然后看起来像这样:
AngularFireModule.initializeApp(fireBaseEnvironment, 'my-app-name')
You are getting that error because in v.4.0 you need to put all modules for data base and auth with the configuration see from line 8您收到该错误,因为在 v.4.0 中您需要将所有模块用于数据库和身份验证,配置见第 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]
})`
Now Angular library Upgrading to AngularFire 5.0现在 Angular 库升级到 AngularFire 5.0
check on this site https://github.com/angular/angularfire2/blob/HEAD/docs/version-5-upgrade.md检查这个网站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);
}
Add the AngularFireDatabaseProvider
to providers
and not as the module for initialize
, because it is a provider:将
AngularFireDatabaseProvider
添加到providers
而不是作为initialize
的模块,因为它是一个提供者:
imports: [
... ,
AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'),
...
]
provider: [
AngularFireDatabaseProvider,
AngularFireAuthProvider
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.