Angular2 No provider for AngularFireDatabase injection error

Posted 2023-03-13

【中文标题】Angular2 No provider for AngularFireDatabase injection error

【英文标题】：

【发布时间】：2017-10-05 04:04:33

【问题描述】：

我已尝试按照Angular2 setup steps 进行操作，但在控制台中出现错误时遇到了一些麻烦：

ERROR 错误：未捕获（承诺中）：错误：没有 AngularFireDatabase 的提供者！

sign-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 

sign-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');
  

任何想法可爱的人？

【参考方案1】：

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

变量'FireBaseEnvoriment'包含firebase的数据，它不需要

.firebase

，那么应该是这样的：

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

【参考方案2】：

您收到该错误是因为在 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]
            )`

【讨论】：

如果我有 2 个 firebase 数据库怎么办？这就是为什么我需要 2 个提供者。我无法在 app.module.ts 中启动 2 个配置文件

另外请注意，我们不再提供带有 initializeApp 的自定义 FirebaseApp 名称。

【参考方案3】：

现在 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);


 

【参考方案4】：

将AngularFireDatabaseProvider 添加到providers，而不是作为initialize 的模块，因为它是提供者：

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

【讨论】：

文档在这种情况下没有提到提供者。顺便说一句，您的代码中也有语法错误。

文档没有提到，但是我在使用 ionic2 和 angularfire2 时遇到了同样的错误，我以这种方式解决了它。我不想放代码，只是为了了解错误是什么。

@ALL 这个已经回答了here