Angular 4：错误：没有 AngularFireDatabase 的提供者

Posted 2023-03-13

【中文标题】Angular 4：错误：没有 AngularFireDatabase 的提供者

【英文标题】：Angular 4: Error: No provider for AngularFireDatabase

【发布时间】：2018-04-03 08:14:44

【问题描述】：

我已经尝试过post 的解决方案，但都没有奏效。几周前，我使用的是版本 4，并且在一个非常相似的项目中，这段代码正在运行，但现在我在尝试获取数据时遇到了这个控制台错误：

Error: No provider for AngularFireDatabase!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at _createClass (core.es5.js:9529)
at _createProviderInstance$1 (core.es5.js:9503)
at resolveNgModuleDep (core.es5.js:9488)

这是我的服务.ts

    import  Injectable  from '@angular/core';
import  AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable  from 'angularfire2/database-deprecated';
import  Observable  from 'rxjs';
import  User  from '../models/users';

@Injectable()
export class UserService 

 users: FirebaseListObservable<any[]>;
  user: FirebaseObjectObservable<any>;

  constructor(public af:AngularFireDatabase)  

    this.users = this.af.list('/users') as FirebaseListObservable<User[]>;
  

  getUsers()
    console.log(this.user);
    return this.user;
  

接收数据的组件：

import  Component, OnInit  from '@angular/core';
import  UserService  from '../../services/user.service';
import  User  from '../../models/users';

@Component(
  selector: 'app-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss']
)
export class BodyComponent implements OnInit 
  user:User;

  constructor(public userService:UserService)  

  

  ngOnInit() 
    this.userService.getUsers().subscribe(users => 
      this.user = users;

    );

  

还有 app.module.ts...

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  RouterModule, Routes  from '@angular/router';


import  AppComponent  from './app.component';
import  NavbarComponent  from './components/navbar/navbar.component';
import  BodyComponent  from './components/body/body.component';
import  FormsModule    from '@angular/forms';
import  PlaygroundComponent  from './components/playground/playground.component';

// AngularFire Imports

import  AngularFireDatabase  from 'angularfire2/database';
import  AngularFireAuth  from 'angularfire2/auth';
import  AngularFireModule  from 'angularfire2';
import  AngularFireDatabaseModule  from 'angularfire2/database';

import  UserService  from './services/user.service';

const appRoutes: Routes = [
  path:'', component:BodyComponent
];

export const firebaseConfig = 
  apiKey: "AIzaSyD3KWZMx0ZJpZxXMCqtIrP-VvXE1SgXZoA",
  authDomain: "myfirstproject-d1c75.firebaseapp.com",
  databaseURL: "https://myfirstproject-d1c75.firebaseio.com",
  storageBucket: "myfirstproject-d1c75.appspot.com",
  messagingSenderId: "1027141777108"





@NgModule(
  declarations: [
    AppComponent,
    NavbarComponent,
    BodyComponent,
    PlaygroundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule

  ],
  providers: [
    AngularFireAuth,
    AngularFireDatabase,
    UserService

  ],
  bootstrap: [AppComponent]
)
export class AppModule  

如果有人能告诉我这里缺少什么，我真的很感激。该应用程序编译但随后我得到一个白屏和控制台中的错误而不是用户数组......谢谢！

【参考方案1】：

只需将其从提供程序中删除并导入到您的组件中，

 providers: [
   // AngularFireAuth,
   // AngularFireDatabase,
    UserService
  ],

编辑

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule

  ]

【讨论】：

我确实喜欢这个（并从提供商import Component, OnInit from '@angular/core'; import UserService from '../../services/user.service'; import User from '../../models/users'; import AngularFireDatabase from 'angularfire2/database'; import AngularFireAuth from 'angularfire2/auth'; 中删除了它们，但错误仍然存​​在......

尝试添加 AngularFireAuthModule

奇怪，什么版本

角度？现在是 4

嗯，奇怪，你肯定是误会了什么，看看这个raw.githubusercontent.com/pradnyaborkar90/Online-Note-Maker/…