Angular2無提供AngularFireDatabase注射錯誤

Question

我曾試圖按照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'); 
    } 
} 

任何想法可愛的人？

Answer 1

添加AngularFireDatabaseProvider到providers而不是作爲模塊initialize，因爲它是一個供應商：

imports: [ 
    ... , 
    AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name'), 
    ... 
] 
provider: [ 
    AngularFireDatabaseProvider, 
    AngularFireAuthProvider 
] 

Answer 2

AngularFireModule.initializeApp(fireBaseEnvironment.firebase, 'my-app-name') 

變量「FireBaseEnvoriment」包含火力點的數據，它不需要

.firebase

，那麼將是這個樣子：

AngularFireModule.initializeApp(fireBaseEnvironment, 'my-app-name') 

Answer 3

因爲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] 
      })` 

Answer 4

現在角庫升級到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); 


}