没有AngularFireDatabase的提供者,AngularFireAuth

Question

道歉,因为我无法想到包含所有信息的更好方法......当我运行这个时,我得到一个错误说明如下.我跟着Ionic Docs到了T,我无法弄清楚什么可能是错的.

错误:

没有AngularFireDatabase的提供者!

的package.json

App.module.ts

Home.html中

Home.ts

Answer 1

AngularDatabase(与AngularAuth相同)从版本angularFire2@4.0.0分离到其自己的模块AngularFireDatabaseModule(AngularAuth的AngularFireAuthModule),请参阅此处的文档.

你应该导入AngularFireDatabaseModule(AngularFireAuthModule for Authentication)RootModule.

import { AngularFireModule } from 'angularfire2';
// for AngularFireDatabase
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
// for AngularFireAuth
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireAuth } from 'angularfire2/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp({         <---- main module
      apiKey: ...,
      authDomain: '...',
      databaseURL: '...',
      storageBucket: '...',
      messagingSenderId: '...'
    }),                                       
    AngularFireDatabaseModule,                <---- for database 
    AngularFireAuthModule                     <---- for auth
  ]
})

Answer 2

在app.module.ts里面添加如下:

import { AngularFireModule } from 'angularfire2';

import { AngularFireDatabaseModule } from 'angularfire2/database';

然后导入如下:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],

在home.ts内使用如下:

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

items: FirebaseListObservable<any[]>;

  constructor(public navCtrl: NavController, db: AngularFireDatabase) {
        this.items = db.list('/items');
  }

我的离子信息:

Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.1
OS Platform: macOS Sierra

Answer 3

如果您使用angularfire2/database-deprecated中的FireBaseDatabase,请确保从angularfire2/database-deprecated导入FireBaseDatabaseModule

反之亦然.唯一的问题是import语句不匹配,因为它们也需要属于同一个包

angularfire2/database或angularfire2/database-deprecated

如果您尝试从第一个导入数据库而从第二个包导入模块,反之亦然.它不会将其识别为DatabaseModule或Database.

------------ ROOT MODULE -------------

    import { AngularFireDatabaseModule } from "angularfire2/database-deprecated"
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes),
        FormsModule,
        AngularFireModule,
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        AngularFireModule.initializeApp(environment.firebase)    
]

-------服务类------------

import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database-deprecated";

Answer 4

将它添加到app.module.ts中的providers数组中 -

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [AuthService,**AngularFireAuth, AngularFireDatabase**, AuthGuard, InventoryService]