错误 NullInjectorError: R3InjectorError(AppModule)

Question

我正在尝试使用服务将我的组件中的值保存到 firebase。但是当我使用服务时，我会收到 NullInjector 错误。我做了所有不是互联网的事情。导入了所有内容，但它不起作用。我已经尝试导入 HttpClientModule、AngularFireDatabase 但没有任何效果。我试图通过全新安装所有内容来完全重新创建项目。我尝试过不同版本的 firebase 和 angular（目前是 firebase@7.24.0 @angular/fire@6.0.3）。什么都行不通。

这是我的 fireservice.service

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class FireserviceService {

  constructor(private db: AngularFireDatabase) {
    
   }
   create(){
    return this.db.list('/shopping-carts').push({
      dateCreated:new Date().getTime()
    });
  }
}

这是我的应用模块

import { FireserviceService } from './fireservice.service';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { BrainComponent } from './brain/brain.component';


@NgModule({
  declarations: [
    AppComponent,
    BrainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    AngularFirestore,
    FireserviceService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(){

  }
}

这是我的组件

import { FireserviceService } from './../fireservice.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'brain',
  templateUrl: './brain.component.html',
  styleUrls: ['./brain.component.css']
})
export class BrainComponent  {

  constructor(private cartService: FireserviceService) { }
  addToCart(val:any){
    console.log(val)
  }

}

这是我得到的错误

core.js:6142 ERROR NullInjectorError: R3InjectorError(AppModule)[FireserviceService -> AngularFireDatabase -> AngularFireDatabase -> AngularFireDatabase]: 
  NullInjectorError: No provider for AngularFireDatabase!
    at NullInjector.get (http://localhost:51081/vendor.js:38768:27)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at injectInjectorOnly (http://localhost:51081/vendor.js:32465:33)
    at Module.??inject (http://localhost:51081/vendor.js:32469:61)
    at Object.FireserviceService_Factory [as factory] (http://localhost:51081/main.js:280:159)
    at R3Injector.hydrate (http://localhost:51081/vendor.js:39103:35)
    at R3Injector.get (http://localhost:51081/vendor.js:38924:33)
    at NgModuleRef$1.get (http://localhost:51081/vendor.js:53004:33)

该站点工作正常，直到我向大脑组件中的构造函数添加参数。但是一旦我在大脑组件的构造函数中添加私家车服务：FireserviceService，它甚至不会加载 HTML。我是 angular 和 firebase 的新手。我正在尝试将值保存在 firebase 数据库中。请帮忙。

Answer 1

检查您的服务中的@Injectable注释是否如下所示：

@Injectable({
  providedIn: 'root'
})

Answer 2

将HttpClientModule导入到app.module.ts中，并将HttpClientModule添加到导入数组中。

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

Answer 3

If you use service you need to import service in app.module.ts in providers.

  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

Answer 4

这是因为您尝试使用 Angular Fire 数据库，但在应用程序模块中导入了 Angular Firestore 模块和 Angular Firestore。

在 app.module.ts 中将 AngularFirestoreModule 替换为 AngularFireDatabaseModule，并将 AngularFirestore 替换为 AngularFireDatabase

  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

但是，如果您是新手，我建议您使用 Angular Firestore 而不是 Angular Fire Database。

https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md