没有 AngularFireDatabase、AngularFireAuth 的提供者答案

【问题标题】：No provider for AngularFireDatabase, AngularFireAuth没有 AngularFireDatabase、AngularFireAuth 的提供者
【发布时间】：2017-10-02 00:27:05
【问题描述】：

抱歉，我想不出更好的方法来包含所有信息...当我运行此程序时，我收到一条错误消息，提示如下。我已经按照 Ionic Docs 到了 T，但我不知道可能出了什么问题。

错误：

没有 AngularFireDatabase 的提供者！

包.json

App.module.ts

主页.html

首页.ts

【问题讨论】：

请不要分享文字图片。而是共享文本并使用 Stack Overflow/Markdown 的格式化选项来格式化它（cmd/ctrl K 是你的朋友）。

标签： angular typescript firebase ionic2 angularfire2

【解决方案1】：

使用 firebase 的更新版本将在 app.module.ts

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';



imports: [
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireDatabaseModule,
....
]

【讨论】：

【解决方案2】：

如果您使用来自 angularfire2/database-deprecated 的 FireBaseDatabase，请确保从 angularfire2/database-deprecated 导入 FireBaseDatabaseModule

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

angularfire2/数据库或 angularfire2/database-deprecated

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

------------ 根模块 -------------

    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";

【讨论】：

有什么原因你给AngaulrFireModule 两次，一次没有initializeApp，一次有？

【解决方案3】：

我的 Angular 应用程序中出现此错误。原来我的自动导入从'angularfire2/database-deprecated'导入了AngularFirebase。清除-deprecated 解决了我的问题。您可能还想检查您的导入。

【讨论】：

【解决方案4】：

AngularDatabase(same for AngularAuth) 被分离到它自己的模块 AngularFireDatabaseModule(AngularFireAuthModule for AngularAuth) 版本 angularFire2@4.0.0，请参阅 文档here。

您应该在您的RootModule 中导入AngularFireDatabaseModule(AngularFireAuthModule 进行身份验证)。

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
  ]
})

【讨论】：

好的，我做到了，消除了所有错误（太棒了！）但是，它仍然没有从 Firebase 读取信息？
@Slabach 可能您的 Firebase 配置有问题。我刚刚将我的示例项目之一从 angularfire2@2.0.0+ 更新为 angularfire2@4.0.0+，并且效果很好。
再提供一个信息，我得到了同样的错误，因为我的导入错误import {AngularFireDatabase} from 'angularfire2/database-deprecated'; ...并没有真正阅读我的 IDE 建议我的内容 :)
收到一个错误，即 FirebaseObjectObservable 不是 angularfire2/database 的导出成员，而且它仅在将 AngularFireDatabase 添加到提供程序数组时才对我有效
非常感谢，太烦人了，因为我正在上 Udemy 的课程，但没有解释......

【解决方案5】：

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

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

【讨论】：

这不是最佳实践。最佳做法是导入 AngularFireDatabaseModule。

【解决方案6】：

在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

【讨论】：